loading...

Angular Material III in 20 Minutes (Adding Search)

jwp profile image John Peters ・1 min read

Material Table (3 Part Series)

1) Angular Material Table in 20 Minutes (Up and Running) 2) Angular Material Table II in 20 Minutes (Styling) 3) Angular Material III in 20 Minutes (Adding Search)

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> 

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> 

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;
  }

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 = "";
  }

As you can see the response is excellent!

Alt Text

Next up: Sortable column headers

JWP2020

Material Table (3 Part Series)

1) Angular Material Table in 20 Minutes (Up and Running) 2) Angular Material Table II in 20 Minutes (Styling) 3) Angular Material III in 20 Minutes (Adding Search)

Posted on Jun 26 by:

jwp profile

John Peters

@jwp

Angular, React, Typescript and JavaScript. The wave of now!

Discussion

markdown guide