How To Make Angular filter by multiple properties
Angular filter by multiple properties | Search Filter Angular Tutorial | Simple Search Filter
Hello viewer in this article I will teach you how to use angular filter for filtering multiple array properties in angular. when we create a filter in angular then angular provide angular filter pipe module to filter our data. when we use angular filter to our project then our first step is we need to install filter in our project here is the command for filter pipe module installation
How To Make A Lazy Loading Module | Types Of Module
Step-1
npm i ng2-search-filter
when we install ng2 search pipe module then we import this module in our app.module.ts file. here is example how to import our search pipe module in app module file.
Step-2
Then our second step. we need to import form module our app.module.ts file. when we are completed those two steps. then we can create a array data in our app.ts file. here is a example how to create a array data in our typescript file.
How to Fetch Data From an API Using Angular – Making a GET Request
userdata=[
{id:1,name:”Manoj”,Desination:”Angular Developer”, age:29,dob:’4-sep-1992′,email:’Manoj123@gmail.com’},
{id:2,name:”Dhiraj”,Desination:”CA”, age:30,dob:’25-jan-1991′,email:’dhirajca@gmail.com’},
{id:3,name:”Deepak”,Desination:”Web Designer”, age:25,dob:’4-sep-1995′,email:’Deeepakdesing@gmail.com’},
{id:4,name:”Rohan”,Desination:”Digital Marketing”, age:26,dob:’4-sep-1996′,email:’Roahan@gmail.com’},
{id:5,name:”Shivam”,Desination:”Docotor”, age:22,dob:’4-sep-1998′,email:’Shivam@gmail.com’},
{id:6,name:”Golu”,Desination:”Indain Army”, age:25,dob:’4-oct-1997′,email:’Golu@gmail.com’},
{id:7,name:”Shankar”,Desination:”UI Designer”, age:28,dob:’5-Nov-1995′,email:’Shankar@gmail.com’}
]
you can easily copy this dummy data.
when we create a array data in our typescript file. then the third step we need to bind this data from our html page for using. here is example how to bind our array data in our html table design.
you can see the above code. I am using ngModel for two data binding. i create a object for any type searchtext. I inserted in inside of ngModel. then we declare this variable for any type in our typescript file. I am using ngFor for binding our array data in table. then we add a pipe filter for our ngFor loop inside. you can see on code. and then i am filtering our searchtext.
Here is final output our project
If you have facing any problem to understand this article then you please also watch video tutorial. here is link
