DEV Community

John Peters
John Peters

Posted on Edited on

Material III in 20 Minutes (Adding Search)

#angular #typescript #material

In the previous articles we have the Material Table up and running, bound to a JSON file, and styled in a nice way. Today we want to add Search function.

<div appGrid columns=".1fr .7fr">
  <label>Search</label>
  <input type="text">
</div>
Enter fullscreen mode Exit fullscreen mode

We start off with a div. It uses our appGrid directive which sets the style to display:grid and sets the width of the label to .1fr; and the input width of .7fr.

The Search Box

Alt Text

Next we want to capture keyup events and use a filter to change the view of the table.

<div appGrid columns=".1fr .7fr">
  <label>Search</label>
  <input #search (keyup)='onSearchKeyUp(search)' type="text">
</div>
Enter fullscreen mode Exit fullscreen mode

We give the input a name and tell it to call onSearchKeyUp when the user types. It sends in the actual input element to the event handler.

  onSearchKeyUp(search){
    var currentFilter = search.value;
    this.dataSource.filter = currentFilter;
  }
Enter fullscreen mode Exit fullscreen mode

That's all you need to add a Search filter. As you type; the grid is filtered, and returns to 'normal state' by removing the text from the search. If you add a button named "Clear" or "Reset" this is the code to clear the filter.

  onClearClicked(){
    this.dataSource.filter = "";
  }
Enter fullscreen mode Exit fullscreen mode

As you can see the response is excellent!

Alt Text

Next up: Sortable column headers

JWP2020

Top comments (0)