blog/typed-mat-cell-def

[utterances-bot]

Type-safe MatCellDef | Chau Tran

In this blog post, we will explore how we could provide strong-types for Template Variable in the MatCellDef

https://nartc.me/blog/typed-mat-cell-def

[hakimio]

Awesome advice. Thank you! 😊

[adisreyaj]

Just the thing I was looking for. Thanks :)

[JWess]

Could a PR be opened to fix this for the official MatCellDef?

[twittwer]

Thx for the article, great idea 👍
I'm just curious how this would affect change detection.
Will the additional input trigger more change detection compared to before?

Here is an adjusted version using a table reference instead of the data source as input to prevent input changes - table reference should be static, while the data source is changing over time.
I would be happy to hear some opinions, thx 🙂

[Klaster1]

What a useful article, after reading it I finally found a solution on how to strongly type our custom directives that allow defining AgGrid cells and context menus from templates.

[aceArt-GmbH]

Is there a solution which would only require 1 change per table instead of 1 change per column?

[Mathieu-DA]

Thanks for the useful article.
It wasn't working for me until a provided the templateRef to the extended MatCellDef class, but maybe I'm missing something?

export class TypeSafeMatCellDef<T> extends MatCellDef {
  constructor(public template: TemplateRef<{ $implicit: T; index: number }>) {
    super(template)
  }

Also, I think @twittwer's way of using the table reference is a good idea :)

[amazing4u]

Here is the combined working code for angular material with standalone components using the table reference suggestion by @twittwer:

import {CdkCellDef} from "@angular/cdk/table";
import {Directive, Input} from "@angular/core";
import {MatCellDef, MatTable} from "@angular/material/table";

@Directive({
    selector: "[matCellDef]",
    providers: [{ provide: CdkCellDef, useExisting: TypeSafeMatCellDef }],
    standalone: true,
})
export class TypeSafeMatCellDef<T> extends MatCellDef {

  // leveraging syntactic-sugar syntax when we use *matCellDef
  @Input() matCellDefTable?: MatTable<T>;

  // ngTemplateContextGuard flag to help with the Language Service
  static ngTemplateContextGuard<T>(
    dir: TypeSafeMatCellDef<T>,
    ctx: unknown,
  ): ctx is { $implicit: T; index: number } {
    return true;
  }
}

import { CdkCellDef } from "@angular/cdk/table";
import {Directive, Input} from "@angular/core";
import {MatRowDef, MatTable, MatTableDataSource} from "@angular/material/table";
import { Observable } from "rxjs";
import {TypeSafeMatCellDef} from "./typed-cell-def.directive";

@Directive({
    selector: "[matRowDef]",
    providers: [{ provide: CdkCellDef, useExisting: TypeSafeMatCellDef }],
    standalone: true,
})
export class TypeSafeMatRowDef<T> extends MatRowDef<T> {

  // leveraging syntactic-sugar syntax when we use *matCellDef
  @Input() matRowDefTable?: MatTable<T>;

  // ngTemplateContextGuard flag to help with the Language Service
  static ngTemplateContextGuard<T>(
    dir: TypeSafeMatRowDef<T>,
    ctx: unknown,
  ): ctx is { $implicit: T; index: number } {
    return true;
  }
}

Usage:

<mat-table [dataSource]="dataSource" #table="matTable">
...
<mat-cell *matCellDef="let item; table: table">
...
<mat-row *matRowDef="let item; columns: displayedColumns; table: table">