I found an examle which can do "select all": https://ng-select.github.io/ng-select#/multiselect-checkbox
But, I get an error: Cannot read property 'selected' of undefined.
I am wondering why I got this error, and how to implement "select all" using ng-select in Angular 5.
Thank you
In your stylesheet add display: none; to the . ng-clear-wrapper selector.
The ng-selected directive sets the selected attribute of an <option> element in a <select> list. The option will be selected if the expression inside the ng-selected attribute returns true. The ng-selected directive is necessary to be able to shift the value between true and false .
Using ng-select
in Angular 5 limits you to using v1.6.3 of ng-select
(or < v2.x), but you can accomplish this using the ng-select
header template. I included the code below, but this is a working Stackblitz I put together as an example:
<ng-select [items]="listOfItems"
bindValue="id"
bindLabel="name"
[multiple]="true"
placeholder="Select City"
formControlName="example">
<ng-template ng-header-tmp>
<div>
<button class="btn btn-link"
(click)="onSelectAll()">Select All</button>
<button class="btn btn-link"
(click)="onClearAll()">Clear All</button>
</div>
</ng-template>
</ng-select>
Then in your controller you would patch the form control with an array of values mapped to only include the bound values you provided to ng-select
, which are the bindValue
key values.
public onSelectAll() {
const selected = this.listOfItems.map(item => item.id);
this.form.get('example').patchValue(selected);
}
public onClearAll() {
this.form.get('example').patchValue([]);
}
Using ng-select multi select with group by - you can add "select all" functionalities with an easy way. Here is the full example -
Demo : https://angular-mkv8vp.stackblitz.io
Code : https://stackblitz.com/edit/angular-mkv8vp?file=src/multi-checkbox-group-example.component.html
Step 1- call the method for select all group by - this.selectAllForDropdownItems(this.people);
Step 2- add selectedAllGroup to every items of that array for group by.
selectAllForDropdownItems(items: any[]) {
let allSelect = items => {
items.forEach(element => {
element['selectedAllGroup'] = 'selectedAllGroup';
});
};
allSelect(items);
};
groupBy="selectedAllGroup" [selectableGroup]="true"
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With