angular/components · error · Error

Cannot change `multiple` mode of mat-selection-list after in

Error message

Cannot change `multiple` mode of mat-selection-list after initialization.

What it means

mat-selection-list's multiple input can only be set before the component initializes; changing it afterwards would require rebuilding the SelectionModel and selected-option semantics, so the library throws in dev mode. This is an intentionally immutable-after-init input to prevent inconsistent selection state.

Source

Thrown at src/material/list/selection-list.ts:129

  /**
   * Function used for comparing an option against the selected value when determining which
   * options should appear as selected. The first argument is the value of an options. The second
   * one is a value from the selected value. A boolean must be returned.
   */
  @Input() compareWith: (o1: any, o2: any) => boolean = (a1, a2) => a1 === a2;

  /** Whether selection is limited to one or multiple items (default multiple). */
  @Input()
  get multiple(): boolean {
    return this._multiple;
  }
  set multiple(value: BooleanInput) {
    const newValue = coerceBooleanProperty(value);

    if (newValue !== this._multiple) {
      if ((typeof ngDevMode === 'undefined' || ngDevMode) && this._initialized) {
        throw new Error(
          'Cannot change `multiple` mode of mat-selection-list after initialization.',
        );
      }

      this._multiple = newValue;
      this.selectedOptions = new SelectionModel(this._multiple, this.selectedOptions.selected);
    }
  }
  private _multiple = true;

  /** Whether radio indicator for all list items is hidden. */
  @Input()
  get hideSingleSelectionIndicator(): boolean {
    return this._hideSingleSelectionIndicator;
  }
  set hideSingleSelectionIndicator(value: BooleanInput) {
    this._hideSingleSelectionIndicator = coerceBooleanProperty(value);
  }

View on GitHub (pinned to 0411926e7d)

Solutions

Set multiple once, statically in the template or at component creation, and never change it
If dynamic behavior is needed, recreate the component (e.g. wrap in @if/ngComponentOutlet keyed by the mode, or use *ngIf to destroy and re-create with the new multiple value)
Use two separate components/templates for single vs multi mode
Validate the mode before the list is initialized rather than mutating after

Example fix

// before
<mat-selection-list [multiple]="isMulti"> <!-- isMulti changes later -->
// after
@if (isMulti) {
  <mat-selection-list [multiple]="true">...</mat-selection-list>
} @else {
  <mat-selection-list [multiple]="false">...</mat-selection-list>
}

Defensive patterns

Strategy: validation

Validate before calling

if (componentInitialized && newMultiple !== currentMultiple) {
  throw new Error('Destroy and recreate mat-selection-list to change `multiple`');
}
// or in template design: key recreation on the mode
// @if (isMulti) { <mat-selection-list [multiple]="true"> } @else { <mat-selection-list [multiple]="false"> }

Try / catch

try {
  selectionList.multiple = newMode;
} catch (e) {
  if (String(e?.message).includes('Cannot change `multiple`')) {
    console.warn('Recreating list component for new selection mode');
    recreateListComponent(newMode);
  } else throw e;
}

Prevention

Treat multiple as immutable: set it once with a static value, not a mutable binding
Model mode changes as component recreation (ngIf/@if branches keyed on the mode)
Never assign to the multiple property via ViewChild after init in tests or code
Document in component APIs that selection mode is fixed for the component lifetime

When it happens

Trigger: Reassigning [multiple] in a template after the list rendered (e.g. via a bound expression that changes at runtime); setting the property programmatically on a ViewChild reference after ngOnInit; reusing a component across route/data changes where the multiplicity flag flips.

Common situations: Switching a list between single-select and multi-select in response to user toggles or config changes; conditional templates that mutate multiple later; tests changing inputs after change detection ran.

Related errors

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