Angular Dropdown with search/filter option
npm install ngx-mat-dropdown
* A simple dropdown/select with search option (single).
* It is based on angular material (should install npm i @angular/material @angular/cdk).
* can be used above Angular >=9 && @angular/material @angular/cdk >=9
npm i ngx-mat-dropdown
import { MatDropdownModule } from 'ngx-mat-dropdown';selector: ngx-mat-dropdown
| Input | Type | Required | Description |
| ---------------- | ------- | -------------------------- | --------------------------------------------------------------------------------------------------------- |
| dropdownSettings | DropdownSettingsModel | YES |
| ctrl | FormControl | optional |
| disabled | boolean | optional |
| dropdownList | Array
| selectedItems | any | YES |
| Output | Type | Required | Description |
| ---------------- | ---------- | -------- | ------------------------------------------------------ |
| onselectItems | any | optional | emits on change. |
1) Register the MatDropdownModule in your app module.
> import { MatDropdownModule } from 'ngx-mat-dropdown'
``typescript
import { AppComponent } from "./app.component";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { MatDropdownModule } from "ngx-mat-dropdown";
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule,
MatDropdownModule,
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
`
2) Use the dropdown component (ngx-mat-dropdown) in your component.
`typescript
import { Component, OnInit } from '@angular/core';
import { DropdownSettingsModel } from 'ngx-mat-dropdown';
@Component({
selector: 'app-root',
template:
,
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
userList =[
{ id:1,name:'user1' },
{ id:2,name:'user2' },
{ id:3,name:'user3' },
{ id:4,name:'user4' },
{ id:5,name:'user5' },
{ id:6,name:'user6' },
]
selected=null;
ngOnInit(){
this.selected= this.userList[0]
}
setDropdownSettings(id,isMultiple,placeholder,label,key,tooltip):DropdownSettingsModel{
return new DropdownSettingsModel(id,isMultiple,placeholder,label,key,tooltip)
}
}
export class DropdownSettingsModel{
id: string;
multiple: boolean; // single/multiselect
placeholder: string;
labelKey: string; // view value
keyValue: string; // unique id/value
tooltip: string;
constructor(id = "", multiple = false, placeholder = "Search", labelKey = "name", keyValue = "key", tooltip = "Code") {
this.id = id;
this.multiple = multiple;
this.placeholder = placeholder;
this.labelKey = labelKey;
this.keyValue = keyValue;
this.tooltip = tooltip ? tooltip : labelKey;
}
}
`
* npm ing serve
* Run for a dev server and running the demo app. Navigate to http://localhost:4200/`. The app will automatically reload if you change any of the source files.