Angular 12 how to filter array data by searching in input. In this tutorial, you will learn how a search input box is added to the Angular 12 app to filter data into an array.
Sometimes you can have a long list of items or data in tabular form which is added to the component for users. In that case, adding a simple filter search bar to your Angular apps can improve into a boon for filtering the set of information the user needs.
So, this tutorial will guide you step by step on how to filter array data by searching in input in angular apps. And you can easily add and use the search input to filter data into an array in angular apps.
Angular 12 – How to Filter Array Data by Searching in Input
Follow the following steps and angular how to filter array data by searching in input:
- Step 1 – Create New Angular App
- Step 2 – Install Search Library
- Step 3 – Add Code on App.Module.ts File
- Step 4 – Add Code on View File
- Step 5 – Add Code On app.Component ts File
- Step 6 – Start the Angular App
Step 1 – Create New Angular App
First of all, open your terminal and execute the following command on it to install angular app:
ng new my-new-app
Step 2 – Install Search Library
Then install ng2-search-filter and bootstrap library for implement search filter array in angular app. So, You can install the packages by executing the following commands on the terminal:
npm install bootstrap
Include bootstrap css into angular.json file:
...
...
"styles": [
"src/styles.scss",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
...
...
Once you created a new angular app and entered into the project further, you have to install and add the ng2-search-filter plugin into the angular app:
$ npm i ng2-search-filter --save
Step 3 – Add Code on App.Module.ts File
In this step, visit src/app directory and open app.module.ts file. And then add the following lines of into app.module.ts file:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app';
import { Ng2SearchPipeModule } from 'ng2-search-filter';
@NgModule({
imports: [
BrowserModule,
Ng2SearchPipeModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
Step 4 – Add Code on View File
In this step, create a list of items in angular app. So, visit src/app/ and app.component.html and update the following code into it:
<div class="form-group">
<input type="text" class="form-control" placeholder="Search Here" [(ngModel)]="term">
</div>
<table class="table">
<thead>
<tr>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Address</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of filterData | filter:term">
<td>{{item.firstName}}</td>
<td>{{item.lastName}}</td>
<td>{{item.address}}</td>
</tr>
</tbody>
</table>
Step 5 – Add Code On app.Component ts File
In this step, visit the src/app directory and open app.component.ts. Then add the following code into component.ts file:
export class AppComponent {
term: string;
filterData = [
{
firstName: 'Celestine',
lastName: 'Schimmel',
address: '7687 Jadon Port'
},
{
firstName: 'Johan',
lastName: 'Ziemann PhD',
address: '156 Streich Ports'
},
{
firstName: 'Lizzie',
lastName: 'Schumm',
address: '5203 Jordon Center'
},
{
firstName: 'Gavin',
lastName: 'Leannon',
address: '91057 Davion Club'
},
{
firstName: 'Lucious',
lastName: 'Leuschke',
address: '16288 Reichel Harbor'
}
]
}
Step 6 – Start the Angular App
In this step, execute the following command on terminal to start angular filter array data by searching in input:
ng serve
