angular/components · error · Error

CdkSelection: multiple selection not enabled

Error message

CdkSelection: multiple selection not enabled

What it means

CdkSelection.toggleSelectAll only makes sense when multiple selection is enabled; in single-selection mode 'select all' is meaningless, so the method throws this dev-mode error whenever _multiple is false. Enabling it requires the CdkSelection (and underlying SelectionSet) to be in multiple mode.

Source

Thrown at src/cdk-experimental/selection/selection.ts:159

  toggleSelection(value: T, index?: number) {
    if (!!this.trackByFn && index == null && (typeof ngDevMode === 'undefined' || ngDevMode)) {
      throw Error('CdkSelection: index required when trackBy is used');
    }

    if (this.isSelected(value, index)) {
      this._selection.deselect({value, index});
    } else {
      this._selection.select({value, index});
    }
  }

  /**
   * Toggles select-all. If no value is selected, select all values. If all values or some of the
   * values are selected, de-select all values.
   */
  toggleSelectAll() {
    if (!this._multiple && (typeof ngDevMode === 'undefined' || ngDevMode)) {
      throw Error('CdkSelection: multiple selection not enabled');
    }

    if (this.selectAllState === 'none') {
      this._selectAll();
    } else {
      this._clearAll();
    }
  }

  /** Checks whether a value is selected. `index` is required if `trackBy` is used. */
  isSelected(value: T, index?: number) {
    if (!!this.trackByFn && index == null && (typeof ngDevMode === 'undefined' || ngDevMode)) {
      throw Error('CdkSelection: index required when trackBy is used');
    }

    return this._selection.isSelected({value, index});
  }

View on GitHub (pinned to 0411926e7d)

Solutions

1. Set multiple on the CdkSelection (and construct its SelectionSet with { multiple: true }).
2. Hide or disable the select-all control when multiple selection is off.
3. Replace the call with toggleSelection(value, index) for single-select toggling.

Example fix

<!-- before -->
<cdk-selection [dataSource]="rows"><button (click)="sel.toggleSelectAll()">All</button>

<!-- after -->
<cdk-selection [dataSource]="rows" multiple> ... 

if (!selectionMultiple) {
  // hide/disable select-all instead of calling it
  showSelectAllButton = false;
} else {
  selection.toggleSelectAll();
}

function supportsSelectAll(sel: { _multiple?: boolean }): boolean {
  return sel._multiple === true;
}

try {
  selection.toggleSelectAll();
} catch (e) {
  if ((e as Error).message.includes('multiple selection not enabled')) {
    selection.toggleSelection(currentValue, 0);
  } else throw e;
}

When it happens

Trigger: Calling toggleSelectAll() on a CdkSelection without multiple: true (e.g., no [multiple] input / SelectionSet not created with multiple). A select-all button wired to a single-select list.

Common situations: Reusing a select-all toolbar component against a single-select list; forgetting to propagate multiple to both the CdkSelection input and its SelectionSet; copy-paste from a multi-select example.

Related errors

• SelectionSet: not multiple selection
• SelectionSet: index required when trackByFn is used.
• CdkSelectAll: missing CdkSelection in the parent
• Unknown data source
• CdkSelection: index required when trackBy is used

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