Angular 11 Multiple selections using the ng-select package

Generally, we are showing a list of data in the simple traditional dropdown box, which is a simple and easy way to show limited data for selection, but sometimes we need to add some user-friendly future in your traditional dropdown, Angular 11 Multiple selections using the ng-select is the simple alternative of traditional dropdown

In this article, I am going to explain simple and best example for implement single and multi-select dropdown using an ng-select package with the example, the ng-select package supports angular 6, angular 7, angular 8, angular 9, angular 10, angular 11 application

Angular 11 Multiple selections using the ng-select Example

Step 1 – Create a new Angular 11 app
Step 2 – Install an Angular 11 ng-select Package
Step 3 – Import an Angular ng-select module
Step 4 – Add code in the component file
Step 5 – Add code in the view file
Step 6 – Run an Angular 11 application

Step 1 – Create a new Angular 11 app

First of all, open your terminal and execute the following command to create a new Angular 11 app.

 ng new my-new-app

Step 2 – Install an Angular 11 ng-select Package

After creating angular app, we will install ng-select package, ng-select is widely user for select, multiselect, filter in searchbox and many more powerfull fetures.

Run the following command for install ng-select NPM package

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

Step 3 – Import an Angular ng-select module

In this step, We will import NgSelectModule module in the import section of the App Module to enable the ng-select component in the application

So open the src/app/app.module.ts file in editor and add NgSelectModule in import section of AppModule class, after import module file will look like this

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

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

Step 4 – Add code in the component file

In this step, open the src/app/app.component.ts file and add following code in file

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

interface BrandObject {
  id: number;
  text: string;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-ngselect-demo';
  laptopBrands: BrandObject[];
  selectedBrand: {};

  constructor(){
    // Select box data
    this.laptopBrands = [
      {
        id:701,
        text:'HP Laptops'
      },{
        id:702,
        text:'Dell Laptops'
      },{
        id:703,
        text:'Asus Laptops'
      },{
        id:704,
        text:'Lenovo Laptops'
      },{
        id:705,
        text:'Samsung Laptops'
      }
    ]
    // Selected Value
    this.selectedBrand = [
      {id: 701, text: 'HP Laptops'},
      {id: 702, text: 'Dell Laptops'}
    ];
  }
}

Let me quick explain above code, We will show all laptop brands in ng-select dropdown list and allow multiple selection

So first of all, I have defined laptopBrands variable to store all brand name and also defined interface brand object named BrandObject

Step 5 – Add code in the view file

In this step, open the src/app/app.component.html file and following code in file

<ng-select [items]="laptopBrands"
     bindLabel="text"
     bindValue="id"
     [multiple]=true
     [(ngModel)]="selectedBrand">
</ng-select>

[items] property is used for bind static or dynamic object, which shown as selection options in drop down

bindLabel property is used to takes key name from object and shown in drop down option label

bindValue property is used to takes key name from object and will be used as value of option

[multiple] allow to select multiple options in drop down

[(ngModel)] allow to pass by default selected values in drop down

Step 6 – Run an Angular 11 application

Execute the following command on terminal run angular app

 ng serve