Custom Searching In Angular

In this article, we will learn how to add a custom searching feature in an Angular application.

The searching is an essential feature and is majorly used functionality in all the applications/websites these days. We can see various examples of applications like; Play Store or App Store: for searching apps, Google Maps: for searching places, and etc.

Prerequisites:

• Basic knowledge of Angular
• Code editor like Visual Studio Code

Create a new Angular project by typing the following command in the VSCode terminal.

ng new custom-search

Now, open the newly created project and install the ng2-search-filter package. It provides good control over searching.

npm install ng2-search-filter

Open the app.module.ts file then add the Ng2SearchPipeModule and FormsModule in the file.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

// search module
import { Ng2SearchPipeModule } from 'ng2-search-filter';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    Ng2SearchPipeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Open the app.component.ts file and add the code in it.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Custom Search';
  searchText;
  products = [
    { id: 1, name: 'Smartphone' },
    { id: 2, name: 'Headphone' },
    { id: 3, name: 'Bike' },
    { id: 4, name: 'Laptop' },
    { id: 5, name: 'TV' },
    { id: 6, name: 'PC' },
    { id: 7, name: 'Car' }
  ];
}

Open the app.component.html file and add the HTML in it.

<h1>{{title}}</h1>
<input [(ngModel)]="searchText" placeholder="Enter Product ID/Name" />
<br/><br/>
<table width="15%" border="1">
  <thead>
    <tr>
      <th>Id</th>
      <th>Product Name</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let product of products | filter:searchText">
      <td>{{product.id}}</td>
      <td>{{product.name}}</td>
    </tr>
  </tbody>
</table>

Output:

Now please click the link given below and follow the steps to add Bootstrap 4 to Angular app for better and responsive design.

Add Bootstrap 4, jQuery and Font Awesome To Angular

Note: You must have to add jQuery because Bootstrap uses jQuery for JavaScript plugins.

Now, just open the app.component.html and replace it with HTML given below.

<div class="container w-50">
  <div class="form-group">
    <h1>{{title}}</h1>
    <input [(ngModel)]="searchText" class="form-control" placeholder="Enter Product ID/Name" />
  </div>
  <table class="table table-striped table-bordered table-hover">
    <thead class="thead-dark">
      <tr>
        <th>Id</th>
        <th>Product Name</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let product of products | filter:searchText">
        <td>{{product.id}}</td>
        <td>{{product.name}}</td>
      </tr>
    </tbody>
  </table>
</div>

That’s it.

Output:

Also, check How To Prevent Copy Content Using JavaScript