|

Angular Table Filter Component

Angular Table Filter Component

One way you might consider filtering the games is by using a Pipe. In this scenario, you would have to build your own custom pipe since Angular does not have a filtering or sorting Pipe built-in. Using a custom pipe might be ok for small amounts of data only, since generally these types of pipes are not high performing. Instead of using a Pipe, it might be better to move the filtering logic into the component itself.


Creating The Filter

The first thing we need is a filtered list of games to bind to. We’ll create a property for this like so.

game-list.component.ts

The next step is to add a property that will let us know when the user changes the filter criteria. This of course would be when a user types a string into the text box like we’ve seen. Although the text in the filter box updates, the list of games is not filtering just yet.

We can add that property like so.
game-list.component.ts

The reason for the leading underscore on this property is because we can actually implement a getter and setter. When the data binding needs the value, the getter is called. Whenever the user modifies the value (types into the filter text box), the data binding calls the setter while passing in the changed or updated value. This syntax looks like so.
game-list.component.ts

Getting and setting the value for the data binding is great, but that is not going to update our list. We need to perform filtering logic any time the user types some text into the text box. Therefore, we need some additional code in the setter. The filtered games array should be set to the filtered list of games like so.
game-list.component.ts

The code above uses the ternary operator to perform some logic based on whether the list filter string is empty, null, undefined, or populated with a valid filter string. If there is a filter value, the doFilter() method runs. If there is no filter value, then filtered games property is assigned to the entire set of games. In other words, if there is not filter, just display all of the games we have.


Adding The Filter Logic

The doFilter() method is not yet defined, so let’s create that now.
game-list.component.ts

In the highlighted code above, the first thing that we do is to set the filter string to lowercase. This is a common technique when filtering data as it makes each item to compare like for like. In other words, it provides for a case-insensitive comparison. Next, the filtered list of games is returned. Note the use of the array filter method which creates a new array with elements that pass the test in the function. For each game in the list, it is first converted to lower case and the indexOf() method is used to see if the filter text is found in the name of the game. If it is, then the game is added to the filtered list of games.


Configuring The Constructor

In order for this to work, we’ll need to set up some default data in the constructor. The constructor automatically runs when the component is initialized. This follows the same idea as a constructor in any object-oriented language. In the constructor, the list of games should be assigned to the filtered games to begin. The default value of the filter string will simply be an empty string as we don’t want any filtering to happen until the user types something into the filter text box.
game-list.component.ts


Updating The Component Template

In order for this to work, we also need to tweak the component template just a bit. See the highlighted lines.
game-list.component.html


The Filter Is Working!


Summary

Our games list component is now fairly complete. By adding the ability to filter games based on user input, we saw how to add custom logic to the Typescript component that triggers each time the user updates the filter criteria. This is the exact type of thing that Angular was designed for, which is creating rich user interfaces that respond to user input.

|