DEV Community

loading...

Make own Angular Searchable Component

tellmehowblog_73 profile image Tell Me How ・1 min read

One of my last assignments was to develop generic method to make components and templates searchable in our application. In this article, I will walk you through the process and ideas behind the decisions I made along the way.

enter image description here

As always, just to get a taste of what I’m talking about let’s first see a nice visualization of the final result:

enter image description here
And the markup for the code:

<input [formControl]="searchControl">

<searchable-container [searchTerm]="searchControl.value">

  <ul>
    <li searchable="Javascript" searchableHighlight></li>
    <li searchable="Angular" searchableHighlight></li>
    <li searchable="Typescript" searchableHighlight></li>
    <li searchable="RxJS" searchableHighlight></li>
    <li searchable="Akita" searchableHighlight></li>
  </ul>

</searchable-container>

You can full tutorial How to Create own Searchable Component in Angular?
There is a task for you when you complete this tutorial if you accept my challenge.

Discussion (0)

pic
Editor guide