ng-multiselect-dropdown

Question

Hi, I have bind the data with ng-mutliselect-dropdwon and enable search option. My requirement is when I search and press key, it should get select in dropdwon. Thanks in Advance.

geetha geetha · Answer

Multiple select options help to select multiple items. Here I add a search option, you need a search option you have to enable allow search filter ='' True''. I attached a sample code for your reference, Product.ts: export class MultipleDemoComponent implements OnInit { byproduct: FormGroup; disabled = false ; ShowFilter = false ; limitSelection = false ; product: Array = []; selectedproduct: Array = []; dropdownSettings: any = {}; constructor(private fb: FormBuilder) {} ngOnInit() { this.product = [ { product_id: 1, product_text: 'CPU' }, { product_id: 2, product_text: 'Monitor' }, { product_id: 3, product_text: 'Keyboard' }, { product_id: 4, product_text: 'Mouse' }, { product_id: 5, product_text: 'RAM' }, { product_id: 6, product_text: 'ROM' } ]; this.selectedItems = [{ product_id: 4, product_text: 'Mouse' }, { product_id: 6, product_text: 'ROM' }]; this.dropdownSettings = { singleSelection: false, idField: 'product_id', textField: 'product_text', selectAllText: 'Select All', unSelectAllText: 'UnSelect All', itemsShowLimit: 3, allowSearchFilter: this.ShowFilter }; this this.myForm = this.fb.group({ product: [this.selectedproduct] }); } onItemSelect(product: any) { console.log('onItemSelect', item); } onSelectAll(product: any) { console.log('onSelectAll', items); } toogleShowFilter() { this.ShowFilter = !this.ShowFilter; this.dropdownSettings = Object .assign({}, this.dropdownSettings, { allowSearchFilter: this.ShowFilter }); } handleLimitSelection() { if (this.limitSelection) { this.dropdownSettings = Object .assign({}, this.dropdownSettings, { limitSelection: 2 }); } else { this.dropdownSettings = Object .assign({}, this.dropdownSettings, { limitSelection: null }); } } } HTML code: form [formGroup]="myForm" > ng-multiselect-dropdown name = "product" [placeholder]="'Select product'" [data]="product" formControlName = "product" [disabled]="disabled" [settings]="dropdownSettings" (onSelect)="onItemSelect($event)" > ng-multiselect-dropdown > form >

Jignesh Kumar · Answer

Hi Amit kumar, Please refer this one, https://www.c-sharpcorner.com/article/multi-select-dropdown-in-angular/

ng-multiselect-dropdown

Answers (2)