title: Show mat-table row dynamically after checking a checkbox
body: <p>I'm trying to show next steps in my checklist with angular mat-table, after checking the checkbox in the first column.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;table mat-table [dataSource]="checklist.checklistStepList" matSort&gt;
  
    &lt;ng-container matColumnDef="checked"&gt;
      &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;Checked&lt;/th&gt;
      &lt;td mat-cell *matCellDef="let step" *ngIf="displayStep(step)"&gt;&lt;mat-checkbox [checked]="step.result==='CHECKED'" (change)="updateCheck(step)"&gt;&lt;/mat-checkbox&gt;&lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container matColumnDef="step"&gt;
      &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;Step&lt;/th&gt;
      &lt;td mat-cell *matCellDef="let step" *ngIf="displayStep(step)"&gt;{{step.title}}&lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container matColumnDef="description"&gt;
      &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;Description&lt;/th&gt;
      &lt;td mat-cell *matCellDef="let step" *ngIf="displayStep(step)"&gt;{{step.description}}&lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container matColumnDef="owner"&gt;
      &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;Owner&lt;/th&gt;
      &lt;td mat-cell *matCellDef="let step" *ngIf="displayStep(step)"&gt;{{step.owner}}&lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container matColumnDef="date"&gt;
      &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;Date&lt;/th&gt;
      &lt;td mat-cell *matCellDef="let step" *ngIf="displayStep(step)"&gt;{{step.date}}&lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container matColumnDef="assignment"&gt;
      &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;Assignments&lt;/th&gt;
      &lt;td mat-cell *matCellDef="let step" *ngIf="displayStep(step)"&gt;{{step.assignment}}&lt;/td&gt;
    &lt;/ng-container&gt;
  
  
    &lt;tr mat-header-row *matHeaderRowDef="columnToDisplay"&gt;&lt;/tr&gt;
    &lt;tr mat-row *matRowDef="let row; columns: columnToDisplay"&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>As you can see here, I'm trying to hide/show my checklist steps with the function <code>displayStep(step)</code> which is just a function that tells me if the step should be displayed and returns a boolean.</p>
  
  <p>The problem here is that my <code>step</code> parameter isn't recognized.</p>
  
  <p>I'm expecting as an output to see the first step, and then after checking it display the next one.</p>
  
  <p>Stackblitz: <a href="https://stackblitz.com/edit/angular-fwnnzf" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-fwnnzf</a></p>