How to make a multi-select dropdown using Angular 11/10 ? - GeeksforGeeks

07 Oct, 2021

In this article, we will learn to build the multiple selection drop-down menu in Angular. To accomplish this task, we require Angular 10 or the Angular 11 version. Sometimes we need to 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 provide a set method that gives an option for a drop-down menu & also provides the change events to fetch the value of the selected option. To build a 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.
 
Environment Setup:

Install Angular
npm install -g @angular/cli

Install Angular
npm install -g @angular/cli

Create a new Angular project
ng new <project-name>

Create a new Angular project
ng new <project-name>

Check the installation by running the project. You should see the angular landing page on http://localhost:4200/
ng serve -o

Check the installation by running the project. You should see the angular landing page on http://localhost:4200/
ng serve -o
Project Structure: After completing the above steps, our project structure will look like the following image:
 
Creating drop-down multi-select:

Create a new application. We will use the below command to create a new application.
ng new geeksforgeeks-multiSelect

Create a new application. We will use the below command to create a new application.
ng new geeksforgeeks-multiSelect

Install @ngselect  npm package. In order to use the drop-down menu, we will follow the below command to install the @ngselect package from the npm.
npm install --save @ng-select/ng-select

Install @ngselect  npm package. In order to use the drop-down menu, we will follow the below command to install the @ngselect package from the npm.
npm install --save @ng-select/ng-select
Example: Import NgSelectModule and FormsModule inside the app.module.ts file. Here, in order to use ngSelect in the application. we need to import  NgSelectModule and FormsModule in the app.module.ts file.
app.module.ts
 

 
 










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






Import CSS file: We need to import a CSS of NgSelectModule. We will use a default.theme.css which is in ng-select/themes folder. This will provide us with a 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";
Declare an object that will contain the lists of the cars, inside the app.component.ts file. Here, we will update the app.component.ts file. This file is used to store the “cars” array containing a list of cars. We are storing all car’s details in javascript objects and inside that objects. We are providing id and names for all different cars. We are also taking the selected array in which we are selecting those menu items which we want to select by default.
app.component.ts
 

 
 










import { Component } from "@angular/core"; 
  
@Component({ 
  selector: "my-app", 
  templateUrl: "./app.component.html", 
  styleUrls: ["./app.component.css"], 
}) 
export class AppComponent { 
  title = "geeksforgeeks-multiSelect"; 
  
  cars = [ 
    { id: 1, name: "BMW Hyundai" }, 
    { id: 2, name: "Kia Tata" }, 
    { id: 3, name: "Volkswagen Ford" }, 
    { id: 4, name: "Renault Audi" }, 
    { id: 5, name: "Mercedes Benz Skoda" }, 
  ]; 
  
  selected = [{ id: 3, name: "Volkswagen Ford" }]; 
}






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

 
 










<h1>Multi-Select Dropdown using Angular 11/10</h1> 
  
<!-- Using Items Input --> 
<ng-select 
  [items]="cars"
  bindLabel="name"
  placeholder="Select Category"
  appendTo="body"
  [multiple]="true"
  [(ngModel)]="selected"> 
</ng-select>






Run the application: In this step, we are ready to run the application. A similar output can be seen as shown below. 
ng serve
Output:
varshagumber28

Angular10


AngularJS-Questions


Picked


AngularJS


Web Technologies

Writing code in comment? 
                                    Please use ide.geeksforgeeks.org, 
                                    generate link and share the link here.
                                
Top 10 Angular Libraries For Web Developers
Angular PrimeNG Dropdown Component
Angular 10 (blur) Event
How to make a Bootstrap Modal Popup in Angular 9/8 ?
How to create module with Routing in Angular 9 ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills