angular/components · error · Error

CdkSelectionColumn: missing CdkSelection in the parent

Error message

CdkSelectionColumn: missing CdkSelection in the parent

What it means

CdkSelectionColumn injects/receives the parent CdkSelection to wire its checkbox column to the selection state. ngOnInit throws this dev-mode error when no parent CdkSelection was found, so the selection column has nothing to bind to. This is distinct from the missing-table check that follows in the same method.

Source

Thrown at src/cdk-experimental/selection/selection-column.ts:88

  /** Column name that should be used to reference this column. */
  @Input('cdkSelectionColumnName')
  get name(): string {
    return this._name;
  }
  set name(name: string) {
    this._name = name;

    this._syncColumnDefName();
  }
  private _name!: string;

  @ViewChild(CdkColumnDef, {static: true}) private readonly _columnDef!: CdkColumnDef;
  @ViewChild(CdkCellDef, {static: true}) private readonly _cell!: CdkCellDef;
  @ViewChild(CdkHeaderCellDef, {static: true}) private readonly _headerCell!: CdkHeaderCellDef;

  ngOnInit() {
    if (!this.selection && (typeof ngDevMode === 'undefined' || ngDevMode)) {
      throw Error('CdkSelectionColumn: missing CdkSelection in the parent');
    }

    this._syncColumnDefName();

    if (this._table) {
      this._columnDef.cell = this._cell;
      this._columnDef.headerCell = this._headerCell;
      this._table.addColumnDef(this._columnDef);
    } else if (typeof ngDevMode === 'undefined' || ngDevMode) {
      throw Error('CdkSelectionColumn: missing parent table');
    }
  }

  ngOnDestroy() {
    if (this._table) {
      this._table.removeColumnDef(this._columnDef);
    }
  }

View on GitHub (pinned to 0411926e7d)

Solutions

Wrap the table in CdkSelection: <cdk-selection [multiple]="true"> <cdk-table>...<cdk-selection-column/></cdk-table> </cdk-selection>.
Ensure the selection column is declared within the cdk-selection subtree so the injection/parent lookup resolves.
Check imports: use the experimental selection module's components consistently (CdkSelection + CdkSelectionColumn from the same package).

Example fix

// before
<cdk-table><th cdk-selection-column .../></cdk-table>
// after
<cdk-selection [multiple]="true">
  <cdk-table><th cdk-selection-column .../></cdk-table>
</cdk-selection>

Defensive patterns

Strategy: validation

Validate before calling

if (!tableHost.closest('cdk-selection')) {
  throw new Error('cdk-selection-column must be used within cdk-selection');
}

Try / catch

ngOnInit() {
  if (!this.selection) {
    console.warn('cdk-selection-column requires a cdk-selection ancestor');
    return; // skip column wiring
  }
}

Prevention

Wrap any table using cdk-selection-column in a cdk-selection component.
Keep the selection wrapper and the table in the same template scope.
Add a dev-time assertion/comment in shared table components noting the cdk-selection requirement.

When it happens

Trigger: Using <cdk-selection-column> (a table header/body column component) outside a <cdk-selection> context, so this.selection is undefined during ngOnInit.

Common situations: Adding the selection column directly inside a plain cdk-table instead of one wrapped in cdk-selection; moving the column into a reused table component that lacks the cdk-selection wrapper; template refactoring that dropped the wrapper element.

Related errors

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