Hello Devs,

In this tutorial, we are going to learn about multi select dropdown in angular 10.

Given below is the good example of multiselect dropdown in angular 10 app then i will help you how to use multi select dropdown in angular 10 application.

Follow this step by step guide given below:




Create New App

Create New App



 Install Npm Packages

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



Import NgSelectModule

src/app/app.module.ts

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

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

import { FormsModule } from '@angular/forms';

  

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

  

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

  

@NgModule({

  imports:      [ BrowserModule, FormsModule, NgSelectModule ],

  declarations: [ AppComponent ],

  bootstrap:    [ AppComponent ]

})

export class AppModule { }



Import CSS File

src/styles.css

/* Add application styles & imports to this file! */

  

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



Update Ts File

src/app/app.component.ts

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

   

@Component({

  selector: 'my-app',

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

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

})

export class AppComponent  {

  name = 'Angular';

  

  categories = [

    {id: 1, name: 'Laravel'},

    {id: 2, name: 'Codeigniter'},

    {id: 3, name: 'React'},

    {id: 4, name: 'PHP'},

    {id: 5, name: 'Angular'},

    {id: 6, name: 'Vue'},

    {id: 7, name: 'JQuery', disabled: true},

    {id: 8, name: 'Javascript'},

  ];

    

  selected = [

    {id: 5, name: 'Angular'},

    {id: 6, name: 'Vue'}

  ];

   

  getSelectedValue(){

    console.log(this.selected);

  }

}



Update Layout File

src/app/app.component.html

<h1>Angular Multiselect Dropdown with Search - Rathorji.in</h1>

  

<ng-select [items]="categories"

               bindLabel="name"

               placeholder="Select Category"

               appendTo="body"

               [multiple]="true"

               [(ngModel)]="selected">

</ng-select>

  

<button (click)="getSelectedValue()">Get Selected Values</button>


Run this command:

ng serve


I hope this example helps you.