Angular 13 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 13 app for filter data into an array.

Angular 13 Filter Array Data Example

Use the below given steps to filter array data by searching in input in angular 13 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

Recommended Angular Tutorials

Be First to Comment

Leave a Reply

Your email address will not be published.