Angular 16 Filter Array Data Example

Angular filter array data; Through this tutorial, i am going to show you how add search input box to the Angular 16 app for filter data into an array.

Angular 16 Filter Array Data Example

Use the below given steps to filter array data by searching in input in Angular 16 apps; as follows:

Step 1 – Create New Angular App
Step 2 – Install Search Library
Step 3 – Import Modules on App.Module.ts File
Step 4 – Import Components on View File
Step 5 – Add Code On app.Component ts File
Step 6 – Start the Angular App

Step 1 – Create New Angular App

Run the following command on command prompt to install angular app:

ng new my-new-app

Step 2 – Install Search Library

Run the following command on command prompt to install ng2-search-filter and bootstrap library:

 npm install bootstrap

add 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 Modules on App.Module.ts File

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

Go to 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 – Import Components On app.Component ts File

Go to 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

Run the following command on command prompt to start angular filter array data by searching in input:

ng serve

Angular 16 Filter Array Data Example