Firstly, you need to install the dropdown command from the command terminal. This >link will help you to use the command. 

After the dropdown command installation, tap on the dependencies and copy and install tslib command. You will be referred to the following page.

Now, use the following command to import 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 { }

In the ts file, insert the following code. Create a dropdown list array and add an id and value to it. Put the dropdown's necessary setting in dropdownsetting.

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:

You will get the following output:

Suggested blogs

>Create a basic Web Application with Angular

>Setting up the local environment for Angular development

>Building a web application with Angular and Firebase

>How To Build Progressive Web Apps with Angular

>A complete guide on Life Cycle of Angular Component