Create own Searchable Component in Angular


In my last article, I have implemented a search filter pipe in Angular. And I was curious to know that How to create my own Searchable Component in Angular.

Create own Searchable Component in Angular
Create own Searchable Component in Angular

If you want to see the filter pipe tutorial then catch it from the below article:


Let us see what we are going to create in Angular.

Creating Searchable Templates in Angular
Creating Searchable Templates in Angular

And the markup for the code:

Create the Searchable Container

We want to give our consumers the ability to add a searchable directive anywhere they want in the template hierarchy.

To accomplish this goal, we’ve leveraged a powerful ability in Element Injector. As you may know, just like a service, we can ask Angular to provide us with a directive via dependency injection. We’ll use this feature to register each searchable directive in our SearchableContainer component.

We define an input that takes the current search term and call the search() method with it (we’ll demonstrate the implementation of this method shortly).

We also expose methods for register and unregister searchable directives. Let’s move on to the SearchableDirective.

Create the Searchable Directive

As stated before, we’re asking Angular to provide us with the SearchableContainer and register the current instance. We’re expecting the SearchableContainer component to be presented, so we’ll throw an error if it doesn’t.

We’ll also expose methods for hiding and showing the native host element. In this case, I decided to go with the CSS strategy rather than use structural directives because DOM creation operations are expensive, and I don’t want to create and remove DOM elements each time the user searched something.

Yes, I know I can use the ViewContainerRef insert() method and save a reference to the view to preserve the elements but it seems like overkill for my needs.

If, for some reason you need this ability, you can always switch to structural directives.

Implement search() method

When we receive a new search term, we need to loop over the searchable directives, check if we have a match and run the corresponding method accordingly.

At this point, we have a basic working search. But designers always want more. We need to highlight the matching term. We already have a dedicated pipe in our application that does precisely this, and it looks something like this:

Although it works, this solution isn’t my favorite. It adds verbosity to the template, and then I need to repeat myself and add the search value for each element.

Do you know how to fetch large data in efficient way in Angular?

Highlighter depends on a parent SearchContainer and also on Searchable that could be his parent or on the same host. So why not leverage the Angular element injector tree again and clean it up?

Create the SearchableHighlight Directive

As I mentioned before, this directive depends on a SearchableContainer and a SearchableDirective, so we’re asking Angular to provide us with both. We mark them as Optional() and throw an error if we can’t find one of them because they are required.

We register the instance in the container, so we can control it exactly like we did with the SearchableDirective.

The highlight() method takes the searchable token and the current search term and sets the innerHTML of the host element after sanitizing it for security reasons.

The resolve() method returns the matches term wrapped with a span so we can apply the CSS style to it.

SearchableContainer  Changes

We’ve added an array to store the SearchableHighlight directives. When we receive a new search term we loop over them and invoke the highlight() method passing the token and the search term.

Exposing the Result Count

Let’s finish with adding the ability to view the result count. First, we’ll add a counter to our SearchableContainer component:

Now we need to expose it to the view. We’re going to use an Angular feature that not everybody is familiar with — the exportAs feature.

I already wrote a dedicated article for this topic, but long story short the exportAs property allows us to expose a directive public API to the template.

Now we can access the SearchableContainer instance in our template:

We’re creating a local variable named container that’s a reference to the SearchableContainer instance. The goal was to inspire you with the basic idea of creating searchable components in Angular.

Source code

Task for you

Create the Searchable Container
Create the Searchable Container

You have to add bootstrap badge in this searchable component. And if you want more then if article is greater than 10 then badge color should be green otherwise red.

Share your code link with us in comment section.

Do you think, You can accept this challenge?