Angular Bootstrap Search

Angular Bootstrap search is a component which enables a process of finding words, sentences, and numbers in the collection of documents, web pages or other sources.

It can be implemented with buttons or icons and placed as an input or in navbar for even better user experience.

Examples of Angular Bootstrap search use:

• Databases
• Search engines
• Built-in search box on documentation page (like the one on the left)

Basic example

Search with colorful border

Colorful always or only in the :focus state.

Search with icon

Colorful always or only in the :focus state.

Search with buttons MDB Pro component

Info notification

MDB has many buttons to use within search box. Take a look here to know all the possibilities.

Searching with local data Live Example

Below you will find a basic example of how you can implement local data searches in your application. In this example, the filtering of the results is achieved by using a custom pipe.

First, define the dataset you want to use to filter the results for.

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],
})
export class AppComponent {
    dataset = ['MDB', 'Angular', 'Bootstrap', 'Framework', 'SPA', 'React', 'Vue'];
}

Then create an html markup for searching, and displaying the results.

<div class="md-form">
  <input type="search" [(ngModel)]="searchText" placeholder="Search text">
</div>
<ul *ngFor="let data of dataset | filter: searchText">
  <li>{{data}}</li>
</ul>

The next step is to generate a pipe in which you can place the logic of filtering the results. To do this, use the Angular CLI command below:

ng generate pipe filter

The last step is to fill the previously created pipe with filtering logic.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {
  transform(items: any[], searchText: string): any[] {

    if (!items) {
      return [];
    }
    if (!searchText) {
      return items;
    }
    searchText = searchText.toLocaleLowerCase();

    return items.filter(it => {
      return it.toLocaleLowerCase().includes(searchText);
    });
  }
}

Searching with remote data Live Example

Below you will find a basic example of how you can implement remote data searches in your application. In this example, the filtering of the results is achieved by using a custom pipe.

First, create a variable to hold your Fake API URL, and provide code which connect your application with remote API.
Then send HTTP GET request to pull data from remote API to your application, and populate usersArray with those data.

// Fake API URL
  url: string = 'https://jsonplaceholder.typicode.com/users';
  usersArray: Array = [];

  constructor(private http: Http) {
    this.http.get(this.url).subscribe(data => {
      // Populating usersArray with names from API
      data.json().forEach(element => {
        this.usersArray.push(element.name);
      });
    });
  }

Then create an html markup for searching, and displaying the results.

<div class="md-form">
  <input type="search" [(ngModel)]="searchText" placeholder="Search text">
</div>
<ul *ngFor="let user of usersArray | filter: searchText">
  <li>{{user}}</li>
</ul>

The next step is to generate a pipe in which you can place the logic of filtering the results. To do this, use the Angular CLI command below:

ng generate pipe filter

The last step is to fill the previously created pipe with filtering logic.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {
  transform(items: any[], searchText: string): any[] {

    if (!items) {
      return [];
    }
    if (!searchText) {
      return items;
    }
    searchText = searchText.toLocaleLowerCase();

    return items.filter(it => {
      return it.toLocaleLowerCase().includes(searchText);
    });
  }
}

API Reference:

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.

API Reference for MDB Angular Search:

// MDB Angular Pro
import { WavesModule, InputsModule, ButtonsModule } from 'ng-uikit-pro-standard'

// MDB Angular Free
import { WavesModule, InputsModule, ButtonsModule } from 'angular-bootstrap-md'

// Forms Module - for ngModel
import { FormsModule } from '@angular/forms'