Show mat-table row dynamically after checking a checkbox

3
votes

I'm trying to show next steps in my checklist with angular mat-table, after checking the checkbox in the first column.

<table mat-table [dataSource]="checklist.checklistStepList" matSort>

  <ng-container matColumnDef="checked">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Checked</th>
    <td mat-cell *matCellDef="let step" *ngIf="displayStep(step)"><mat-checkbox [checked]="step.result==='CHECKED'" (change)="updateCheck(step)"></mat-checkbox></td>
  </ng-container>

  <ng-container matColumnDef="step">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Step</th>
    <td mat-cell *matCellDef="let step" *ngIf="displayStep(step)">{{step.title}}</td>
  </ng-container>

  <ng-container matColumnDef="description">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Description</th>
    <td mat-cell *matCellDef="let step" *ngIf="displayStep(step)">{{step.description}}</td>
  </ng-container>

  <ng-container matColumnDef="owner">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Owner</th>
    <td mat-cell *matCellDef="let step" *ngIf="displayStep(step)">{{step.owner}}</td>
  </ng-container>

  <ng-container matColumnDef="date">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Date</th>
    <td mat-cell *matCellDef="let step" *ngIf="displayStep(step)">{{step.date}}</td>
  </ng-container>

  <ng-container matColumnDef="assignment">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Assignments</th>
    <td mat-cell *matCellDef="let step" *ngIf="displayStep(step)">{{step.assignment}}</td>
  </ng-container>


  <tr mat-header-row *matHeaderRowDef="columnToDisplay"></tr>
  <tr mat-row *matRowDef="let row; columns: columnToDisplay"></tr>
</table>

As you can see here, I'm trying to hide/show my checklist steps with the function displayStep(step) which is just a function that tells me if the step should be displayed and returns a boolean.

The problem here is that my step parameter isn't recognized.

I'm expecting as an output to see the first step, and then after checking it display the next one.

Stackblitz: https://stackblitz.com/edit/angular-fwnnzf

2
angularangular-material
Provide stackblitz if possible! - Prashant Pimpale
okok hold on good sir :) - MA-Moustache
It is not allowed to have two structural directives on the same element. - yurzui
Ok it's edited, now you can access the stackblitz. I've simplified some function so it's easy to read. - MA-Moustache
I wonder if modifying the datasource isn't the simplest way to do it... - MA-Moustache

2 Answers

4
votes

To hide the row for which are not checked you can you something like this

<tr mat-header-row *matHeaderRowDef="columnToDisplay"></tr>
<tr mat-row *matRowDef="let row; columns: columnToDisplay" [hidden]="!row.checked">
</tr>

[hidden]=true while hide it

you can see the example here

0
votes

I have updated your stackbliz : https://stackblitz.com/edit/angular-fwnnzf-3p7xvo

explanation:

prepare a steplist on application init.

prepareSteps(){
    this.checklistSteps = [];
    for(let i = 0; i < STEPS_MOCK.length ; i++){
      let currStep = STEPS_MOCK[i];

      //push the step to stepList.
      this.checklistSteps.push(currStep);

      //if the last pusded step is not checked then our list is complete so exit the loop
      if(!currStep.checked){
        break;
      }
    }
  }

then on every checkbox change event update child steps and then prepare the list with updated stpes.

I hope this will help.