Angular 12 Filter Array Data Tutorial

Filter array data by searching in input with angular 12 app. In this tutorial, i am going to show you from scratch on how a search input box is added to the Angular 12 app to filter data into an array.

And in this tutorial you will learn 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.

How to Filter Array Data by Searching with Input in Angular 12

  • Step 1 – Create New Angular App
  • Step 2 – Install Search Library
  • Step 3 – Import Module 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

Execute the following command on terminal to install angular app:

ng new my-new-app

Step 2 – Install Search Library

Execute the following command on terminal to install ng2-search-filter and bootstrap library for implement search filter array in angular app:

 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 – Import Module on App.Module.ts File

Import modules; so go to 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

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

Recommended Angular Tutorials

Leave a Comment