I have a reusable table with the [cellData]="row" attribute to populate each cell on the table (see sample table in the screenshot).
My question is, how can we replace the null values on the template with "---" so that instead of displaying nothing on the cell when the value is empty, it will display "---"?
Is it possible to achieve this within the
<app-table-multi-sort-cell-default [cellData]="row" [id]="column.id" [subId]="getColumnSubId(column.id)" [columnName]="column.name"></app-table-multi-sort-cell-default>#table-multi-sort.component.html code
<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>
#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 {
}
}