Angular Bootstrap Search

Angular Search - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

Angular Bootstrap search is a component that enables the 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 the navbar for an even better user experience.

Examples of Angular Bootstrap search use include:

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

Basic example

        
            
            <!-- Search form -->
            <form class="form-inline waves-light" mdbWavesEffect>
              <div class="md-form mt-0">
                <input class="form-control mr-sm-2" type="text" placeholder="Search">
              </div>
            </form>
          
        
    

Search with colorful border

Colorful always or only in the :focus state.

        
            
            <form>
              <div class="md-form active-pink active-pink-2 mb-3">
                <input class="form-control" type="search" id="search1" aria-label="Search" mdbInput>
                <label for="search1">Search</label>
              </div>
              <!-- Search form -->
              <div class="md-form active-purple active-purple-2 mb-3">
                <input class="form-control" type="search" id="search2" aria-label="Search" mdbInput>
                <label for="search2">Search</label>
              </div>
              <!-- Search form -->
              <div class="md-form active-cyan active-cyan-2 mb-3">
                <input class="form-control" type="search" id="search3" aria-label="Search" mdbInput>
                <label for="search3">Search</label>
              </div>
              <!-- Search form -->
              <div class="md-form active-pink-2 mb-3">
                <input class="form-control" type="search" id="search4" aria-label="Search" mdbInput>
                <label for="search4">Search</label>
              </div>
              <!-- Search form -->
              <div class="md-form active-purple-2 mb-3">
                <input class="form-control" type="search" id="search5" aria-label="Search" mdbInput>
                <label for="search5">Search</label>
              </div>
              <!-- Search form -->
              <div class="md-form active-cyan-2 mb-3">
                <input class="form-control" type="search" id="search6" aria-label="Search" mdbInput>
                <label for="search6">Search</label>
              </div>
            </form>
          
        
    
        
            
            .active-pink-2 input[type=search]:focus:not([readonly]) {
              border-bottom: 1px solid #f48fb1;
              box-shadow: 0 1px 0 0 #f48fb1;
            }
            .active-pink input[type=search] {
              border-bottom: 1px solid #f48fb1;
              box-shadow: 0 1px 0 0 #f48fb1;
            }
            .active-purple-2 input[type=search]:focus:not([readonly]) {
              border-bottom: 1px solid #ce93d8;
              box-shadow: 0 1px 0 0 #ce93d8;
            }
            .active-purple input[type=search] {
              border-bottom: 1px solid #ce93d8;
              box-shadow: 0 1px 0 0 #ce93d8;
            }
            .active-cyan-2 input[type=search]:focus:not([readonly]) {
              border-bottom: 1px solid #4dd0e1;
              box-shadow: 0 1px 0 0 #4dd0e1;
            }
            .active-cyan input[type=search] {
              border-bottom: 1px solid #4dd0e1;
              box-shadow: 0 1px 0 0 #4dd0e1;
            }
          
        
    

Search with icon

Colorful always or only in the :focus state.

        
            
            <!-- Search form -->
            <form class="form-inline md-form form-sm">
              <mdb-icon fas icon="search" aria-hidden="true"></mdb-icon>
              <input class="form-control form-control-sm ml-3 w-75" type="text" placeholder="Search" aria-label="Search"
                mdbInput>
            </form>
            <!-- Search form -->
            <form class="form-inline md-form form-sm active-pink active-pink-2">
              <mdb-icon fas icon="search" aria-hidden="true"></mdb-icon>
              <input class="form-control form-control-sm ml-3 w-75" type="text" placeholder="Search" aria-label="Search"
                mdbInput>
            </form>
            <!-- Search form -->
            <form class="form-inline md-form form-sm active-purple active-purple-2">
              <mdb-icon fas icon="search" aria-hidden="true"></mdb-icon>
              <input class="form-control form-control-sm ml-3 w-75" type="text" placeholder="Search" aria-label="Search"
                mdbInput>
            </form>
            <!-- Search form -->
            <form class="form-inline md-form form-sm active-cyan active-cyan-2">
              <mdb-icon fas icon="search" aria-hidden="true"></mdb-icon>
              <input class="form-control form-control-sm ml-3 w-75" type="text" placeholder="Search" aria-label="Search"
                mdbInput>
            </form>
            <!-- Search form -->
            <form class="form-inline md-form form-sm">
              <input class="form-control form-control-sm mr-3 w-75" type="text" placeholder="Search" aria-label="Search"
                mdbInput>
              <mdb-icon fas icon="search" aria-hidden="true"></mdb-icon>
            </form>
            <!-- Search form -->
            <form class="form-inline md-form form-sm active-pink-2">
              <input class="form-control form-control-sm mr-3 w-75" type="text" placeholder="Search" aria-label="Search"
                mdbInput>
              <mdb-icon fas icon="search" aria-hidden="true"></mdb-icon>
            </form>
            <!-- Search form -->
            <form class="form-inline md-form form-sm active-purple-2">
              <input class="form-control form-control-sm mr-3 w-75" type="text" placeholder="Search" aria-label="Search"
                mdbInput>
              <mdb-icon fas icon="search" aria-hidden="true"></mdb-icon>
            </form>
            <!-- Search form -->
            <form class="form-inline md-form form-sm active-cyan-2">
              <input class="form-control form-control-sm mr-3 w-75" type="text" placeholder="Search" aria-label="Search"
                mdbInput>
              <mdb-icon fas icon="search" aria-hidden="true"></mdb-icon>
            </form>
          
        
    
        
            
            .active-pink-2 input[type=text]:focus:not([readonly]) {
              border-bottom: 1px solid #f48fb1;
              box-shadow: 0 1px 0 0 #f48fb1;
            }
            .active-pink input[type=text] {
              border-bottom: 1px solid #f48fb1;
              box-shadow: 0 1px 0 0 #f48fb1;
            }
            .active-purple-2 input[type=text]:focus:not([readonly]) {
              border-bottom: 1px solid #ce93d8;
              box-shadow: 0 1px 0 0 #ce93d8;
            }
            .active-purple input[type=text] {
              border-bottom: 1px solid #ce93d8;
              box-shadow: 0 1px 0 0 #ce93d8;
            }
            .active-cyan-2 input[type=text]:focus:not([readonly]) {
              border-bottom: 1px solid #4dd0e1;
              box-shadow: 0 1px 0 0 #4dd0e1;
            }
            .active-cyan input[type=text] {
              border-bottom: 1px solid #4dd0e1;
              box-shadow: 0 1px 0 0 #4dd0e1;
            }
            .active-cyan .fa,
            .active-cyan-2 .fa {
              color: #4dd0e1;
            }
            .active-purple .fa,
            .active-purple-2 .fa {
              color: #ce93d8;
            }
            .active-pink .fa,
            .active-pink-2 .fa {
              color: #f48fb1;
            }
          
        
    

Search with buttons MDB Pro component

Info notification

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

        
            
          <form class="form-inline md-form mr-auto mb-4">
            <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
            <button mdbBtn size="sm" gradient="aqua" rounded="true" class="my-0 waves-light" mdbWavesEffect type="submit">Search</button>
          </form>
          <form class="form-inline md-form mr-auto mb-4">
            <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
            <button mdbBtn size="sm" color="warning" outline="true" rounded="true" class="my-0 waves-light"
              mdbWavesEffect type="submit">Search</button>
          </form>
          <form class="form-inline md-form mr-auto mb-4">
            <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
            <button mdbBtn size="sm" color="elegant" rounded="true" class="my-0 waves-light" mdbWavesEffect type="submit">Search</button>
          </form>
        
        
    

Searching with local data

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 for 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 the 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

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 connects your application with the remote API.
Then send a HTTP GET request to pull data from remote API to your application, and populate the usersArray with this 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 for 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 the 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);
              });
            }
          }
        
        
    

Angular Search - API

In this section you will find informations about required modules and available inputs, outputs, methods and events of search component.


Modules used

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:
        
            
        import { WavesModule, InputsModule, ButtonsModule } from 'ng-uikit-pro-standard';
        import { FormsModule } from '@angular/forms';
      
        
    
        
            
        import { WavesModule, InputsModule, ButtonsModule } from 'angular-bootstrap-md';
        import { FormsModule } from '@angular/forms';