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>
run application
ng serve
More Related Article Create a Cascading Dropdown List in Angular