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
- Place the selection column inside the proper parent element that provides MatSelection (the selection table/list container).
- Import the experimental selection module (e.g. MatSelectionModule from @angular/material-experimental) so the parent directive is registered.
- Verify the template structure matches the documented selection-table example (parent table + selection column).
- 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
- Always use the selection column inside the designated selection table parent.
- Import the correct experimental selection module.
- Follow the official selection-table template example when wiring up columns.
- Keep dev mode enabled locally — ngDevMode guards catch these early.
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
- MatSelectionColumn: missing parent table
- MatDatepicker: No provider found for DateAdapter. You must a
- MatDatepicker: No provider found for MAT_DATE_FORMATS. You m
- MatDatepicker: No provider found for DateAdapter. You must a
- MatDatepicker: No provider found for DateAdapter. You must a
AI-assisted analysis of angular/components@0411926e7d (2026-08-31).
Data as JSON: /api/errors/d33b7638a35425a3.
Report an issue: GitHub.