ng-multiselect-dropdown

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
};
thisthis.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>

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

geetha geetha4y ago
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
        };
        thisthis.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>
0
Jignesh Kumar4y ago
Hi Amit kumar,

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