How to display a table element in an angular material table with certain conditions?

Question

Angular

I have an array of objects:

[
{name: 'some1', tasks: [{taskname: 'tasksome1', status: 'finished' }, {taskname: 'tasksome2', status: 'finished' }] },
{name: 'some2', tasks: [{taskname: 'tasksome3', status: 'started' }, {taskname: 'tasksome4', status: 'finished' }] },
]

So here is what I need in a cell:

<ng-container matColumnDef="tasks">
    <th mat-header-cell *matHeaderCellDef> Задачи </th>
    <td mat-cell *matCellDef="let element"> {{element.taskname}} </td>
  </ng-container>

Display only the task that has the "started" status, how to implement it?

Answer 1

You need to use the ngIf directive like so:

<ng-container matColumnDef="tasks">
    <th mat-header-cell *matHeaderCellDef> Задачи </th>
    <td 
mat-cell *matCellDef="let element"
*ngIf="element.status === started"
> {{element.taskname}} </td>
  </ng-container>

Sorry if there are syntax errors, I'm a beginner