Angular MultiSelect Dropdown using Ng-select Example

Hi Dev,

This is a short guide on angular multiselect dropdown example. i would like to show you how to use multi select in angular. In this article, we will implement a how to use multi select dropdown in angular. i would like to share with you multiselect dropdown in angular example.

If you are looking for good example of multiselect dropdown in angular app then i will help you how to use multi select dropdown in angular application. we will use ng-select npm package for multiselect dropdown in angular. they provide set methods to give dropdown option and change events to getting selected option values etc.

Here, we will look step by step example how to use multiselect dropdown in angular 6, angular 7, angular 8, angular 9, angular 10, angular 11, angular 12, angular 13, angular 14, angular 15, angular 16 and angular 17 application.

So, let's see very simple step and get it very simple example here:

Step 1: Create New App

You can easily create your angular application using bellow command:

ng new myMultiselect

Step 2: Install Npm Packages

In this step, we will install @ng-select/ng-select npm package for creating chart using multi select dropdown in angular 8/9. so let's run bellow command:

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

Step 3: Import NgSelectModule

Now, here we will import NgSelectModule from ng-select and then we add on declarations part. so let's update app.module.ts file as like bellow:

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 { }

Step 4: Import CSS File

now in this step, we will import ng-select theme css file. so we can get multi select dropdown box design so let's import in styles.css file.

src/styles.css

/* Add application styles & imports to this file! */
  
@import "~@ng-select/ng-select/themes/default.theme.css";

Step 5: Update Ts File

Here, we will update app.component.ts file here, in this file we will take "categories" array with list of category so we can create dropdown box option. we will also create "selected" array with give default selected option if you need then. Another we will create getSelectedValue() that call on click event and get the selected values.

You can update as bellow app.component.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);
  }
}

Step 6: Update Layout File

Here, we will update html file as like bellow, so update it as like bellow:

src/app/app.component.html

<h1>Angular Multiselect Dropdown with Search - ItSolutionStuff.com</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>

Now you can run angular 8 app:

Run Angular App:

ng serve

I hope it can help you...