How to Multiple select angular 6/7/8/9

Multiple select Angular

Create A New Angular Project
Using Ng CLI tool we will create a new Angular project by running below command in terminal:

$ ng new ng-select-demo

Install & Configure Ng-Select
After creating an Angular project next we will install ng-select page.
Step 1) Run the following command in terminal to install ng-select:

$ npm install --save @ng-select/ng-select

Step 2) To use ng-select component, we need to import NgSelectModule & FormsModule in app.module.ts file:

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

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

import { NgSelectModule } from '@ng-select/ng-select';
import { FormsModule } from '@angular/forms';

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

We already have three themes available to select from. Import any of the following in the style.css file:

@import "~@ng-select/ng-select/themes/default.theme.css";

At file AppComponent.component.html

 <ng-select [items]="cities2"
                   bindLabel="name"
                   bindValue="id"
                   [multiple]="true"
                   placeholder="Select cities"
                   [(ngModel)]="selectedCityIds">
        </ng-select>

At AppComponent.component.ts

 cities2 = [
        {id: 1, name: 'Vilnius'},
        {id: 2, name: 'Kaunas'},
        {id: 3, name: 'Pavilnys', disabled: true},
        {id: 4, name: 'Pabradė'},
        {id: 5, name: 'Klaipėda'}
    ];

selectedCityIds: string[];
Method constructor

constructor() {
        this.create10kCities();
    }

private create10kCities() {
        this.cities4 = Array.from({length: 10000}, (value, key) => key)
                            .map(val => ({
                              id: val,
                              name: `city ${val}`
                            }));
    }