How To Used Multi Select Dropdown Using Angular

Hello Friends, In this article, we will learn to build a multiple selection drop-down menu in Angular. To accomplish this task, we require a Angular 10 or the Angular 11 version. Sometimes we need to the display dynamically fetched multi-selected data in a drop-down menu, for this, we will use the npm @ng-select/ng-select package as a multi-select drop-down menu. The package is used to the provide a set method that gives an option for a drop-down menu & also provides the change events to the fetch a value of the selected option. To build the multiple-select drop-down menu using Angular, we will follow the below steps in sequence.

Syntax :

<ng-select
 [items]="item-name"
 bindLabel="name"
 placeholder="Select item"
 appendTo="body"
 [multiple]="true"
 [(ngModel)]="selected">
</ng-select>

Prerequisites:  NPM must be preinstalled.

Step 1:- Install Angular

npm install -g @angular/cli

Step 2:- Create a new Angular project

ng new <project-name>

Step 3:- Create a new application. We will use the below command to the create a new application.

ng new multiSelectDDL --routing

Step 4:- Install @ngselect npm package. In order to use a drop-down menu, we will follow the below command to a install the @ngselect package from the npm.

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

Step 5:- Import the NgSelectModule and FormsModule inside a app.module.ts file. Here, in order to the use ngSelect in a application. we need to import the NgSelectModule and FormsModule in the app.module.ts file.

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { NgSelectModule } from "@ng-select/ng-select";

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

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

Step 6:- Import CSS file: We need to the import a CSS of NgSelectModule. We will use the default.theme.css which is in a ng-select/themes folder. This will provide us with the multi-select drop-down design. We will use this import CSS file inside the style.css.

styles.css

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

Step 6:- Declare an object that will contain the list’s of the cars, inside a app.component.ts file. Here, we will a update the app.component.ts file. This file is used to the store “cars” array containing a list of cars. We are storing all the car’s details in javascript objects and inside that objects. We are providing id & names for all different cars. We are also taking a selected array in which we are selecting those menu items which we want to the select by default.

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

@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
})
export class AppComponent {
title = "multiSelectDDL";

cars = [
  { id: 1, name: "Volkswagen Ford" },
  { id: 2, name: "Mercedes Benz Skoda" },
  { id: 3, name: "BMW Hyundai" },
  { id: 4, name: "Renault Audi" },
  { id: 5, name: "Kia Tata" },
];

selected = [{ id: 3, name: "Volkswagen Ford" }];
}

Step 6:- we will update our the layout or view file to render our content. Here, we are using a app.component.html file for updating or viewing our content like this:

<h1>Multi-Select Dropdown using Angular</h1>

<ng-select
[items]="cars"
bindLabel="name"
placeholder="Select Category"
appendTo="body"
[multiple]="true"
[(ngModel)]="selected" style="width: 38%;">
</ng-select>

Step 7:- Run the application, In this step’s, we are ready to run the applications. A similar output can be seen as shown below.

ng serve

OUT PUT

Please give your valuable feedback and if you have any questions or issues about this article, please let me know.

Also Check How To Import Excel Data Into SQL Table Using SQL Server Database

Submit a Comment

Your email address will not be published.

Subscribe

Select Categories