Display an icon depending on their value (Angular 4+)?

Question

I want to display an icon based on the value it is receiving. Currently, the icon is appearing in all rows but I would like to have a certain condition that it would only appear if the value is "Active".

 <ng-container matColumnDef="status">
        <th class="header" mat-header-cell *matHeaderCellDef mat-sort-header>STATUS</th>
        <td class="row" *matCellDef="let user" [ngStyle]="{'color':user.status === 'Active' ? 'green' : 'blue' }">{{status}}
        <i class="icon-active"></i></td>
</ng-container>

Answer 1

The easiest way to achieve it is by using *ngIf

<i *ngIf="user.status === 'Active'" class="icon-active"></i>