Angular Material Tutorial - 29 - Data table Filtering

features like filtering sorting and

pagination have been made really simple

in angular material let's take a look at

filtering in this video sorting and

pagination in subsequent videos

filtering can be achieved in three

simple steps the first step is to create

a data source as an instance of the mat

table data source class so let's begin

by importing mat table data source from

angular material next we create a data

source property as an instance of this

imported class so data source is going

to be new mat table data source and then

we pass in element data as the argument

so that is our first step creating the

data source as an instance of the mat

table data source class second step is

to create an input field where the user

can enter the filter text let's add that

code in the HTML mat form field then an

input element we add the mat input

attribute and also a placeholder that

says filter every time the user enters

some text we need to filter the data

table for that we listen to the key of

event

so keep up and on keep up we are going

to call a method called apply filter and

to this method we pass in the filter

text which is accessed using dollar

event dot target dot value that is the

second step creating a filter input the

final step is to define this apply

filter method which actually filters the

data source so back in the component

class apply filter accepts the filtered

text of type string and within the

method all we have to do is assign the

filter text value to the filter property

of the data source so this dot data

source dot filter is equal to filter

value dot trim dot to lowercase now this

kind of seems like magic but let me tell

you how it works remember the math table

data source class that we imported well

that class has a property called filter

when you want to filter out the data all

you have to do is assign a string to

that property when you assign the filter

value the data source will reduce each

row to a serialized form and will filter

out the row if it does not contain that

filtered value or to put it in simpler

terms does the data rope contain the

filter if yes only then display the row

so if you take a look at the browser you

can see that we have a filter input I

type H and you can see it filters the

elements type H E and it filters further

I can also filter on numeric values type

6 and you can see it filters out the

rows that don't contain the number 6 so

three basic steps for filtering creating

the data source as an

instance of math table datasource

creating the input filter and finally on

care of that input element assign the

filter value to the filter property of

the data source alright in the next

video let's take a look at sorting in

data tables