1. Overview

When we start using the Angular Material Table component, we sometimes get into a situation where we need to hide some of the items in the data source array that we feed to the table.

In this tutorial, let's try to understand how we can conditionally hide some of the rows to make them not displayed on the table.

2. Content

The approach is simple, we just need to add a class based on the property value of each row from the data source array that we feed to the table as shown below.

Here, we have used a class hidden that is applied to a row based on the value we have on the property starFlag as shown below.

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

And, the class hidden is defined as below to hide a row.

.hidden {
    display: none;
}

3. Conclusion

We know how to easily hide some of the row items from the data source array on an Angular Material table.