How to add a search filter inside the dropdown in AngularJS?

 Firstly, install the dropdown command from the command terminal. You can use the command from the link.

https://www.npmjs.com/package/angular2-multiselect-dropdown

After installing the dropdown command, click on dependencies and copy and install tslib command.

Now, import the following in the app.module.ts file.

import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';

 

and also import in imports

NgMultiSelectDropDownModule.forRoot()

Write the whole code in app.module.ts

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

import { BrowserModule } from '@angular/platform-browser';

import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';

 

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

import { AppComponent } from './app.component';

import { AngularPipeComponent } from './angular-pipe/angular-pipe.component';

import { UserComponent } from './user/user.component';

import { HomeComponent } from './home/home.component';

import { AboutComponent } from './about/about.component';

 

@NgModule({

  declarations: [

    AppComponent,

    AngularPipeComponent,

    UserComponent,

    HomeComponent,

    AboutComponent

  ],

  imports: [

    BrowserModule,

    AppRoutingModule,

    NgMultiSelectDropDownModule.forRoot()

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

 

Place the following code in ts file. Make an array of dropdownlist with id and value in array. In dropdownsetting, write the required setting of the dropdown.

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

import { IDropdownSettings } from 'ng-multiselect-dropdown';

 

@Component({

  selector: 'app-home',

  templateUrl: './home.component.html',

  styleUrls: ['./home.component.css']

})

export class HomeComponent implements OnInit{

  dropdownList : any=[];

  dropdownSettings!: IDropdownSettings;

 

  ngOnInit() {

    this.dropdownList = [

      { item_id: 1, item_text: 'Delhi' },

      { item_id: 2, item_text: 'Noida' },

      { item_id: 3, item_text: 'Mumbai' },

      { item_id: 4, item_text: 'Punjab' },

      { item_id: 5, item_text: 'Kolkata' },

    ];

   

    this.dropdownSettings= {

      singleSelection: false,

      idField: 'item_id',

      textField: 'item_text',

      selectAllText: 'Select All',

      unSelectAllText: 'UnSelect All',

      itemsShowLimit: 5,

      allowSearchFilter: true

    };

  }

}

Now, Place the following code in html file.

 <div class="container text-center">

 <ng-multiselect-dropdown

  [placeholder]="'Select dropdown'"

  [settings]="dropdownSettings"

  [data]="dropdownList">

</ng-multiselect-dropdown>

</div>

Output:

The output will be: