show dynamic data in angular mat table range wise

Question

I have to integrate service data to angular mat table but it should change like below scenarios.

1. if start date & end date difference is < 21 days then it should show dd/mm between start_date & end_date in header
2. if start date & end date difference in < 70 days then it should show header with week number.
3. if start date & end date difference is > 70 days & less than 1 year then header values should be month names. Data from service look like below:

let arr =[
{
    Code: 1234,
    Type: first
    Codedata: [{
        Ward: abc,
        Start_date:. 10/10/2022,
        End_date : 15/10/2022
    },{
        Ward: xyz,
        Start_date:. 15/10/2022,
        End_date : 15/12/2022
    }
]
}]

I tried to change headers dynamically so I am getting error as could not find column id with [id]

Answer 1

You can create an Angular Pipe to change the date column in mat-table dynamically. Create a transformDate.pipe.ts file and write your logic to check your conditions. Change your HTML code like below.

<table mat-table [dataSource]="dataSource" class="mt-2 mat-elevation-z0">
 <ng-container *ngFor="let column of allCols" [matColumnDef]="column">
  <th mat-header-cell *matHeaderCellDef>{{ column === 'yourColumnName' ? (column | transformDateHeader) : column }}</th>
  <td mat-cell *matCellDef="let row">
     {{ column === 'yourColumnName' ? (row[column] | transfromDateColumn) }}
  </td>
 </ng-container>
</table>