title: How to dynamically show/hide some rows in mat-table?
body: <p>I have used a mat-table component in my Angular app, where results of some sport events are displayed. Normally, I want to show only three best results and then, when the user clicks the "ellipsis button" (like on the related pic) - the table should expand and show rest, hidden rows. I have problems with using *ngIf statement in the  markup, because I'm not allowed to have more than one attribute with * prefix. How to do it in a different way? Thanks in advance.</p>
  
  <pre><code>&lt;table mat-table [dataSource]="qualifyingResults" class="exo-2"&gt;
    &lt;ng-container matColumnDef="position"&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt;POS&lt;/th&gt;
      &lt;td mat-cell *matCellDef="let result"&gt;{{ result.position }}&lt;/td&gt;
    &lt;/ng-container&gt;
    &lt;ng-container matColumnDef="driver"&gt;
      &lt;th mat-header-cell *matHeaderCellDef class="center-header"&gt;DRIVER&lt;/th&gt;
      &lt;td mat-cell *matCellDef="let result" class="text-center font-weight-bold"&gt;{{ result.Driver.code }}&lt;/td&gt;
    &lt;/ng-container&gt;
    &lt;ng-container matColumnDef="time"&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt;TIME&lt;/th&gt;
      &lt;td mat-cell *matCellDef="let result"&gt;{{ result.time }}&lt;/td&gt;
    &lt;/ng-container&gt;
    &lt;tr mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/tr&gt;
    &lt;tr mat-row *matRowDef="let row; columns: displayedColumns"&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/1Ze7U.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1Ze7U.jpg" alt="enter image description here"></a></p>