Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Afif Halim
90
How to add "Select All" selection for Igx ComboBox
posted

Hi,

Is there a way to add the "Select All" button to the IgxCombo selection?

For example, adding below of the search input:

Any help will be highly appreciated.

Thanks.

Regards,

Afif

Parents
No Data
Reply
  • 640
    Verified Answer
    Offline posted

    Hello Afif,

    Thank you for posting in our community.

    What I can suggest for achieving your requirement is using the Header template of igxCombo where you can add your custom content:

    HTML:

    <igx-combo #combo [data]="data">
  <ng-template igxComboHeader>
    <div class="select-all-button-wrapper">
      <igx-checkbox (click)="onSelectAllClick()" [checked]="combo.data?.length === combo.selection?.length"
        [indeterminate]="combo.selection?.length > 0 && combo.selection?.length !== combo.data?.length">Select All
      </igx-checkbox>
    </div>
  </ng-template>
</igx-combo>

    TYPESCRIPT:

    export class ComboSelectAllButtonComponent { 
  @ViewChild('combo') public combo!: IgxComboComponent;

  public onSelectAllClick() {
    if (this.combo.selection.length === this.combo.data?.length) {
      this.combo.deselectAllItems();
    } else {
      this.combo.selectAllItems();
    }
  }
}

    Attached you will find a small sample where is demonstrated how the suggested approach is working.

    Please test the sample on your side and let me know whether you find it helpful.

    Looking forward to hearing from you.

    Regards,
    Viktor Kombov
    Entry Level Software Developer
    Infragistics, Inc.

    IgxComboSelectAllCheckBox.zip

Children