1.0.1 • Published 4 years ago
@xeeva-npmlib/ngx-mat-dropdown v1.0.1
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
Installation
npm i ngx-mat-dropdown
API
import { MatDropdownModule } from '@xeeva-npmlib/ngx-mat-dropdown';
selector: ngx-mat-dropdown
@Inputs()
Input | Type | Required | Description |
---|---|---|---|
dropdownSettings | DropdownSettingsModel | YES | |
ctrl | FormControl | optional | |
disabled | boolean | optional | |
dropdownList | Array | YES | |
selectedItems | any | YES |
@Outputs()
Output | Type | Required | Description |
---|---|---|---|
onselectItems | any | optional | emits on change. |
Usage
1) Register the MatDropdownModule
in your app module.
import { MatDropdownModule } from '@xeeva-npmlib/ngx-mat-dropdown'
import { AppComponent } from "./app.component";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { MatDropdownModule } from "@xeeva-npmlib/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.
import { Component, OnInit } from '@angular/core';
import { DropdownSettingsModel } from '@xeeva-npmlib/ngx-mat-dropdown';
@Component({
selector: 'app-root',
template: ` <ngx-mat-dropdown [dropdownSettings]="setDropdownSettings('userList-id',false,'users','name','id','name')"
[dropdownList]="userList" [selectedItems]="selected" (onselectItems)="selected = $event.value">
</ngx-mat-dropdown>
`,
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;
}
}
Running the example in local env
npm i
- Run
ng serve
for a dev server and running the demo app. Navigate tohttp://localhost:4200/
. The app will automatically reload if you change any of the source files.