Create a Multi-Select Dropdown List in Angular

In this article, we will learn How to Create a Multi-Select Dropdown List in Angular. The Angular MultiSelect dropdown serves as a substitute for the HTML select tag, enabling users to choose multiple values from a predefined list of options. It functions as a textbox component that permits users to either type in or select multiple values.

Table of Contents

Create a New Angular Project

ng new multiselectdropdown

Install-Package

To build a multi-selection dropdown menu we need to install the package @Ng-select/ng-select.

npm install @ng-select/ng-select

Import-Package in App Module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component'; 
import { FormsModule } from '@angular/forms'; 
import { NgSelectModule } from '@ng-select/ng-select';

@NgModule({
  declarations: [
    AppComponent,    
    MultiselectdropdownComponent
  ],
  imports: [
    BrowserModule, 
    FormsModule,
    NgSelectModule
     
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Update app.component.html

<div class="d-flex justify-content-center mt-5"> 
    <div class="col-0"> 
    <app-multiselectdropdown></app-multiselectdropdown> 
    </div>
</div>

Create Component

ng g c multiselectdropdown/multiselectdropdown–skip-tests

multiselectdropdown.component.ts

import { Component, OnInit } from '@angular/core';
import { DropdownservicesService } from '../services/dropdownservices.service';
 

@Component({
  selector: 'app-multiselectdropdown',
  templateUrl: './multiselectdropdown.component.html',
  styleUrls: ['./multiselectdropdown.component.css']
})
export class MultiselectdropdownComponent { 
     
  
    countries =[
      {
         "id" : 1,
         "name":"USA"
      },
      {
         "id" : 2,
         "name":"Australia"
      },
      {
         "id" : 3,
         "name":"Germany"
      },
      {
         "id" : 4,
         "name":"England"
      }
     ];
     selected = [{id:1,name:'USA'}]; 
}

multiselectdropdown.component.html

 <div>
    <ng-select 
     [items]="countries"
     bindLabel="name"
     [multiple]="true" 
     [(ngModel)]="selected">
     </ng-select>      
 </div>