Angular Material Mat Table Filter By Dropdown Selection

in our previous video we saw how to create uh how to use angular material tables in your angle project so this is what we created there we added a common filter for filtering the data and all but what if you want to filter based on a particular column or something like that so uh maybe like let's say you want to filter with gender male and females like maybe based on a drop down selection or that way so what we are going to do is we are going to add a drop down here which will have male and female selection so based on the selections this table will get filtered so uh let's get started so uh this is our app.com.html file so here i'll first add a drop down uh this is a matte select mat form fill matte select so once you add it make sure you go to your app.module.ts file and make sure you have matte slick module here if you don't please import it here now once you have imported it you should be able to see the collection here based on male and female now on this drop down we need to add a selection change event so i'll add a selection change event which will pass in all events then so we'll just create this method inside here dollar event now based on whatever value we receive here uh we'll filter the existing data or like we'll filter the api response okay so we'll define a variable to keep a track of our api response i'll come down here where i'll just keep a backup of api response in this variable and i'll assign response to it and when it's changing event is triggered what i'll do is i'll create a filter data from i'm using low dash here no dash okay i need to import it i guess it's already here so you can do our school filter this sort api response and we want to compare we want to return the items which have like item dot gender equal to gender to lower case so we are comparing the um gender and the ap response is the one that is being selected from the ui dollar even value dot to your case okay now here that's how we get the filter data once you have the filter data you need to set to the data source that tabulate ourselves and assign the filter data there and save the changes now if we go here um now based on drop-down selection if i click on mail the list should get filtered based on mail users and if i click on female it should get filtered based on few main uses so this is how you can use a drop-down to filter the mat table data hope you like this video do let me know your thoughts in the comments below thanks for watching

Channel: CodeHandbook

Views: 27,612

Keywords: Filter Angular Material Table, Filter mat table by dropdown selection

Id: aML-L1xj7j4

Length: 3min 52sec (232 seconds)

Published: Thu Oct 07 2021