Cubex Dropdown
npm install cubex-multiselect-dropdown
``bash`
npm install --save cubex-multiselect-dropdown
ts
import { MultiselectDropdownModule } from 'cubex-multiselect-dropdown';@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
MultiselectDropdownModule, ########'Cubex Dropdown'
],
providers: [],
bootstrap: [AppComponent]
})
`HTML file
`html
[selectionWidth]="11"
[width]="111"
[height]="200"
[isOpen]="false" [data]='[
{ "name": "Option1", value:"Option1" },
{ "name": "Option2", value:"Option2" },
{ "name": "Option3","value":"Option3" }]'
[displayKey]="'name'"
[toggleKey]="'value'"
(onChange)="multiselectOnchage($event)"
[label]="'Entities'"
[placeholder]="'Select an option'"
>
////////////////////////////////////////////////////////////////
[selectionWidth]="11"
[width]="111"
[height]="200"
[isOpen]="false"
[data]='[
{ "name": "Option1", value:"Option1" },
{ "name": "Option2", value:"Option2" },
{ "name": "Option3","value":"Option3" }]'
[displayKey]="'name'"
[toggleKey]="'value'"
(onChange)="singleselectOnchage($event)"
[label]="'Entities'"
[placeholder]="'Select an option'"
>
`
TS file
`ts
/**
* singleselectOnchage
* $event will return selected data []
*/
singleselectOnchage($event){
console.log($event);
}
/**
* multiselectOnchage
* $event will return selected data []
*/
multiselectOnchage($event){
console.log($event);
}
``[Ramesh M]() (Developer)