Site Admin Founder of MeaningArticles
08 September 20211842 Views

Angular 10 Create Multi Select Dropdown

Hello Dev.

In this article, we can discuss about multi select dropdown in angular 10. we can assist you to provide instance of how to use multi select dropdown in angular 10. let’s talk about the way to create multi select dropdown in angular 10. you could see angular 10 multiple select dropdown.

In case you are looking for true example of multiselect dropdown in angular 10 app then i can assist you a way to use multi select dropdown in angular 10 utility. we can use ng-select npm package for multiselect dropdown in angular. they provide set methods to offer dropdown option and change events to getting selected on option values etc.

Here, we will look step by step example how to use multiselect dropdown in angular 8/9/10 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/10. 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 - meaningarticles.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>