Angular 14 search filter array of objects data

Angular filter array data by searching in input. In this tutorial, we will learn how a search input box is added to the Angular 14 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.

Angular search filter array of objects data

Follow the following steps to filter array data by searching in input in angular 14 apps; as follows:

• 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

Recommended Angular Tutorials