angular/components · error

MatSelectionColumn: missing MatSelection in the parent

Error message

MatSelectionColumn: missing MatSelection in the parent

What it means

MatSelectionColumn is a directive that expects to be used inside a <mat-selection-list>-style parent that provides the MatSelection injectable. In dev mode, if the MatSelection dependency is absent, the component throws this error during ngOnInit instead of failing later with an obscure null error. It is a structural/DI sanity check.

Source

Thrown at src/material-experimental/selection/selection-column.ts:96

  @Input()
  get name(): string {
    return this._name;
  }
  set name(name: string) {
    this._name = name;

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

  @ViewChild(MatColumnDef, {static: true}) private readonly _columnDef!: MatColumnDef;
  @ViewChild(MatCellDef, {static: true}) private readonly _cell!: MatCellDef;
  @ViewChild(MatHeaderCellDef, {static: true})
  private readonly _headerCell!: MatHeaderCellDef;

  ngOnInit() {
    if (!this.selection && (typeof ngDevMode === 'undefined' || ngDevMode)) {
      throw Error('MatSelectionColumn: missing MatSelection 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('MatSelectionColumn: missing parent table');
    }
  }

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

View on GitHub (pinned to 0411926e7d)

Solutions

  1. Place the selection column inside the proper parent element that provides MatSelection (the selection table/list container).
  2. Import the experimental selection module (e.g. MatSelectionModule from @angular/material-experimental) so the parent directive is registered.
  3. Verify the template structure matches the documented selection-table example (parent table + selection column).
  4. If using a custom parent, provide MatSelection yourself via a directive/provider.

Example fix

// before
<table mat-table>
  <th mat-selection-column>...</th>
</table>

// after
<mat-selection-table> <!-- provides MatSelection -->
  <th mat-selection-column>...</th>
</mat-selection-table>
Defensive patterns

Strategy: type-guard

Validate before calling

// In your component/directive, verify the structural context before rendering the column:
if (!document.querySelector('mat-selection-table th mat-selection-column, table[mat-selection-table]')) {
  console.warn('mat-selection-column used outside its required parent');
}

Type guard

function isInsideSelectionColumnHost(el: HTMLElement): boolean {
  return !!el.closest('mat-selection-table') && !!el.closest('th, td');
}

Try / catch

// This is a dev-mode structural error; fix the template rather than catching it.
// Use ErrorHandler only to log:
export class SelectionErrorHandler implements ErrorHandler {
  handleError(e: any) {
    if (!String(e?.message).includes('MatSelectionColumn')) throw e;
    console.error('Template structure error:', e.message);
  }
}

Prevention

When it happens

Trigger: Placing a `<mat-selection-column>` (or applying the selection-column directive) outside a component that provides MatSelection, so `this.selection` is undefined when ngOnInit runs; using the column with a plain `<table>` instead of the selection table wrapper.

Common situations: Copy-pasting the selection column markup into a regular MatTable without the experimental selection table; missing the required parent wrapper component after upgrading; forgetting to import the experimental selection module so the parent directive isn't matched.

Related errors


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