Hello Devs,
In this tutorial, we are going to learn about multi select dropdown in angular 10.
Given below is the good example of multiselect dropdown in angular 10 app then i will help you how to use multi select dropdown in angular 10 application.
Follow this step by step guide given below:
Create New App
Create New App
Install Npm Packages
npm install --save @ng-select/ng-select
Import NgSelectModule
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 { }
Import CSS File
src/styles.css
/* Add application styles & imports to this file! */
@import "~@ng-select/ng-select/themes/default.theme.css";
Update 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);
}
}
Update Layout File
src/app/app.component.html
<h1>Angular Multiselect Dropdown with Search - Rathorji.in</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>
Run this command:
ng serve
I hope this example helps you.