modifying table row values on Angular table-CodePudding

I have a reusable table the [cellData]="row" populate each cell on the table (sample table is on the screenshot).

What I want is how to we replace the null values on the template with "---" so that instead of displaying nothing on the cell if value is empty I wanna display "---".

Is it possible to do it in <app-table-multi-sort-cell-default [cellData]="row" [id]="column.id" [subId]="getColumnSubId(column.id)" [columnName]="column.name"></app-table-multi-sort-cell-default> so I don't have to modify the row objects and just do it in the template. Thanks for any help.

#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>

enter image description here

#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 {
  }

}

CodePudding user response：

You can create a simple function for handling null values:

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

  ngOnInit(): void {
  }

  public customFunc(row: any, columnId: any) {
    row[columnId] = row[columnId] == null ? '---' : row[columnId];
    return row;
  }
}

And in the template:

<app-table-multi-sort-cell-default 
  [cellData]="customFunc(row, column.id)" 
  [id]="column.id" 
  [subId]="getColumnSubId(column.id)" 
  [columnName]="column.name">
</app-table-multi-sort-cell-default>