{"record":{"id":"d4cc7ec6aa1793ca","repo":"angular/components","slug":"cannot-change-multiple-mode-of-mat-selection-lis","errorCode":null,"errorMessage":"Cannot change `multiple` mode of mat-selection-list after initialization.","messagePattern":"Cannot change `multiple` mode of mat-selection-list after initialization\\.","errorType":"validation","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"src/material/list/selection-list.ts","lineNumber":129,"sourceCode":"\n  /**\n   * Function used for comparing an option against the selected value when determining which\n   * options should appear as selected. The first argument is the value of an options. The second\n   * one is a value from the selected value. A boolean must be returned.\n   */\n  @Input() compareWith: (o1: any, o2: any) => boolean = (a1, a2) => a1 === a2;\n\n  /** Whether selection is limited to one or multiple items (default multiple). */\n  @Input()\n  get multiple(): boolean {\n    return this._multiple;\n  }\n  set multiple(value: BooleanInput) {\n    const newValue = coerceBooleanProperty(value);\n\n    if (newValue !== this._multiple) {\n      if ((typeof ngDevMode === 'undefined' || ngDevMode) && this._initialized) {\n        throw new Error(\n          'Cannot change `multiple` mode of mat-selection-list after initialization.',\n        );\n      }\n\n      this._multiple = newValue;\n      this.selectedOptions = new SelectionModel(this._multiple, this.selectedOptions.selected);\n    }\n  }\n  private _multiple = true;\n\n  /** Whether radio indicator for all list items is hidden. */\n  @Input()\n  get hideSingleSelectionIndicator(): boolean {\n    return this._hideSingleSelectionIndicator;\n  }\n  set hideSingleSelectionIndicator(value: BooleanInput) {\n    this._hideSingleSelectionIndicator = coerceBooleanProperty(value);\n  }","sourceCodeStart":111,"sourceCodeEnd":147,"githubUrl":"https://github.com/angular/components/blob/0411926e7d8ae06b32236ec1048a888cfad5abf2/src/material/list/selection-list.ts#L111-L147","documentation":"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.","triggerScenarios":"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.","commonSituations":"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.","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"],"exampleFix":"// before\n<mat-selection-list [multiple]=\"isMulti\"> <!-- isMulti changes later -->\n// after\n@if (isMulti) {\n  <mat-selection-list [multiple]=\"true\">...</mat-selection-list>\n} @else {\n  <mat-selection-list [multiple]=\"false\">...</mat-selection-list>\n}","handlingStrategy":"validation","validationCode":"if (componentInitialized && newMultiple !== currentMultiple) {\n  throw new Error('Destroy and recreate mat-selection-list to change `multiple`');\n}\n// or in template design: key recreation on the mode\n// @if (isMulti) { <mat-selection-list [multiple]=\"true\"> } @else { <mat-selection-list [multiple]=\"false\"> }","typeGuard":null,"tryCatchPattern":"try {\n  selectionList.multiple = newMode;\n} catch (e) {\n  if (String(e?.message).includes('Cannot change `multiple`')) {\n    console.warn('Recreating list component for new selection mode');\n    recreateListComponent(newMode);\n  } else throw e;\n}","preventionTips":["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"],"tags":["angular","material","selection-list","immutable-input"],"backgroundTag":"input-changed-after-initialization","analyzedSha":"0411926e7d8ae06b32236ec1048a888cfad5abf2","analyzedAt":"2026-08-31T11:58:23.400Z","schemaVersion":2},"datasetVersion":"2026-08-31T14:17:45.589Z"}