Tengo una tabla reutilizable, [cellData]="row" llena cada celda de la tabla (la tabla de muestra está en la captura de pantalla).

Lo que quiero es cómo reemplazamos los valores nulos en la plantilla con "---" para que, en lugar de mostrar nada en la celda si el valor está vacío, quiero mostrar "---".

¿Es posible hacerlo en <app-table-multi-sort-cell-default [cellData]="row" [id]="column.id" [subId]="getColumnSubId(column.id)" [columnName]="column.name"></app-table-multi-sort-cell-default> para que no tenga que modificar los objetos de fila y simplemente hacerlo en la plantilla. Gracias por cualquier ayuda.

#table-multi-sort.component.html código

 <ng-container *ngFor="let column of table.columns" [matColumnDef]="column.id"> <mat-header-cell class="table-multi-sort-header" *matHeaderCellDef [mat-multi-sort-header]="column.id"> <div>{{column.name}}</div> <div class="sub-text">{{getColumnSubtitle(column.id)}}</div> </mat-header-cell> <mat-cell *matCellDef="let row" (click)="editRow(row)"> <ng-container *ngIf="column.id !== 'action'; then col; else actionCol"></ng-container> <ng-template #col> <app-table-multi-sort-cell-default [cellData]="row" [id]="column.id" [subId]="getColumnSubId(column.id)" [columnName]="column.name"></app-table-multi-sort-cell-default> </ng-template> <ng-template #actionCol> <app-table-multi-sort-cell-action [rowData]="row" [actions]="getActions(column.id)" (actionClickEvent)="clickTableAction($event,row)"></app-table-multi-sort-cell-action> </ng-template> </mat-cell> </ng-container>

ingrese la descripción de la imagen aquí

#table-multi-sort-cell-default.component.html

 <div>{{cellData[id]}}</div> <div class="cellSubText secondary-text">{{cellData[subId]}}</div>

#table-multi-sort-cell-default.component.ts

 export class TableMultiSortCellDefaultComponent implements OnInit { @Input() cellData:any; @Input() id: any; @Input() subId:any; @Input() columnName: any; constructor() { } ngOnInit(): void { } }