Search

Angular Bootstrap 5 Search component

The search box is an UI element prepared for creating search engines. Its most important element is search input, but it can also contain icons or buttons. It is also adjusted to be used in various other components such as navbar, dropdown, table, select, sidenav and many more.

Basic example

A basic example with a simple button.

Edit in sandbox 
        
            
      <div class="input-group">
        <mdb-form-control>
          <input mdbInput type="search" id="form1" class="form-control" />
          <label mdbLabel class="form-label" for="form1">Search</label>
        </mdb-form-control>
        <button type="button" class="btn btn-primary">
          <i class="fas fa-search"></i>
        </button>
      </div>

Search event

Here is example how you can make search component with event on it which will fire after clicking on search button.

Edit in sandbox 
        
            
      <div class="input-group">
        <mdb-form-control>
          <input #input mdbInput type="search" id="form1" class="form-control" />
          <label mdbLabel class="form-label" for="form1">Search</label>
        </mdb-form-control>
        <button type="button" class="btn btn-primary" (click)="search(input.value)">
          <i class="fas fa-search"></i>
        </button>
      </div>
      
        
    
        
            
      import { Component } from '@angular/core';

      @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.scss']
      })
      export class AppComponent {
        title = 'mdb-angular-ui-kit-free';
        
        search(value: string) {
          console.log(value);
        }
      }

Dropdown

Moreover, you can integrate our search with dropdown component

Learn more about Dropdowns in the Dropdowns Docs

Edit in sandbox 
        
            
      <div mdbDropdown class="dropdown">
        <button
          class="btn btn-primary dropdown-toggle"
          type="button"
          id="dropdownMenuButton"
          aria-expanded="false"
          mdbDropdownToggle
        >
          Dropdown
        </button>
        <ul
          mdbDropdownMenu
          class="dropdown-menu"
          aria-labelledby="dropdownMenuButton"
        >
          <div class="input-group">
            <mdb-form-control>
              <input
                mdbInput
                (keydown)="searchItems($event)"
                type="search"
                id="form1"
                class="form-control"
              />
              <label mdbLabel class="form-label" for="form1">Search</label>
            </mdb-form-control>
            <button type="button" class="btn btn-primary">
              <i class="fas fa-search"></i>
            </button>
          </div>
          <li *ngFor="let item of filteredItems">
            <a class="dropdown-item" href="#">{{ item }}</a>
          </li>
        </ul>
      </div>
      
        
    
        
            
      import { Component } from '@angular/core';

      @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.scss']
      })
      export class AppComponent {
        title = 'mdb-angular-ui-kit-free';
        
        items = ['Action', 'Another action', 'Something else here'];
        filteredItems = this.items;
          
        searchItems(event: any) {
          const value = event.target.value;
      
          this.filterItems(value);
        }
      
        filterItems(value: string) {
          const filterValue = value.toLowerCase();
          this.filteredItems = this.items.filter((item: string) =>
            item.toLowerCase().includes(filterValue)
          );
        }
      }