angular/components · error · Error

CdkSelectAll: CdkSelection must have cdkSelectionMultiple se

Error message

CdkSelectAll: CdkSelection must have cdkSelectionMultiple set to true

What it means

CdkSelectAll's toggling semantics only make sense when the surrounding CdkSelection supports multiple selection. _assertValidParentSelection (called from ngOnInit) throws this dev-mode error when the parent CdkSelection exists but its `multiple` flag is falsy, i.e. cdkSelectionMultiple was not set to true.

Source

Thrown at src/cdk-experimental/selection/select-all.ts:104

    if (this._controlValueAccessor && this._controlValueAccessor.length) {
      this._controlValueAccessor[0].registerOnChange((e: unknown) => {
        if (e === true || e === false) {
          this.toggle();
        }
      });
      this.checked.pipe(takeUntil(this._destroyed)).subscribe(state => {
        this._controlValueAccessor![0].writeValue(state);
      });
    }
  }

  private _assertValidParentSelection() {
    if (!this._selection && (typeof ngDevMode === 'undefined' || ngDevMode)) {
      throw Error('CdkSelectAll: missing CdkSelection in the parent');
    }

    if (!this._selection.multiple && (typeof ngDevMode === 'undefined' || ngDevMode)) {
      throw Error('CdkSelectAll: CdkSelection must have cdkSelectionMultiple set to true');
    }
  }

  ngOnDestroy() {
    this._destroyed.next();
    this._destroyed.complete();
  }
}

View on GitHub (pinned to 0411926e7d)

Solutions

Set multiple on the parent: <cdk-selection [multiple]="true">.
If single selection is required, remove the cdk-select-all element — select-all is meaningless for single-select.
Bind multiple to a property rather than hard-coding if the mode is dynamic, and only render cdk-select-all when multiple is true (*ngIf).

Example fix

// before
<cdk-selection>
  <cdk-select-all>Select all</cdk-select-all>
</cdk-selection>
// after
<cdk-selection [multiple]="true">
  <cdk-select-all>Select all</cdk-select-all>
</cdk-selection>

Defensive patterns

Strategy: validation

Validate before calling

if (!selectionState.multiple) {
  // hide or don't render the select-all control
  showSelectAll = false;
}

Prevention

Bind [multiple]="true" on cdk-selection whenever a select-all is present.
Gate cdk-select-all behind *ngIf="selection.multiple".
Review selection mode (single vs multiple) when copying list templates.

When it happens

Trigger: Using <cdk-select-all> inside <cdk-selection> where the [multiple] input is absent or false — e.g. <cdk-selection>...</cdk-selection> without [multiple]="true".

Common situations: Reusing a single-select cdk-selection and adding a select-all toggle; forgetting the multiple binding when migrating from a checkbox-list pattern; default single-select configuration assumed by copy-pasted markup.

Related errors

AI-assisted analysis of angular/components@0411926e7d (2026-08-31). Data as JSON: /api/errors/2fe5579e78086767. Report an issue: GitHub.