How to add "select all" functionality to ng-select in Angular 5

Question

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

What about `selectedPeople.map(el => el.selected = true)`? – Christian Vincenzo Traina Jul 25 '18 at 12:07 — Christian Vincenzo Traina, Jul 25 '18 at 12:07
Could you be more specific? – Mingyue Chen Jul 25 '18 at 18:01 — Mingyue Chen, Jul 25 '18 at 18:01

score 21 · Accepted Answer · answered Feb 05 '19 at 22:48

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([]);
}

It worked really well, the only problem is after clicking on Select All the values get patched but the dropdown remains there only until we click outside of the dropdown. Can you please tell me how to overcome it. — Ayjaz Sayed, Sep 15 '20 at 10:37
You can do something like this : IN HTML: give id to ng select using # In TS: Declare view child @ViewChild('serviceTypeDropdown') private serviceTypeDropdown: NgSelectComponent; and in all select method after patching the value you can simply call this function: this.serviceTypeDropdown.close(); — Manish Patidar, Jul 08 '21 at 05:51

score 5 · Answer 2 · answered Jun 12 '21 at 04:28

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);
  };

then bind to html

groupBy="selectedAllGroup" [selectableGroup]="true"

score 2 · Answer 3 · answered Jun 26 '19 at 05:46

If you do not use react forms, and wanted to use select all property, then #getModelValue="ngModel" inside ngselect tag in html file and in *.ts file, add following code:

onSelectAll(select: NgModel, values, array) { 
  const selected = this.dropdownList.datas.map(item => item.id);
  select.update.emit(selected); 
}

deselectAll(select: NgModel) {
     select.update.emit([]); 
}

How to add "select all" functionality to ng-select in Angular 5

3 Answers3

Linked