[Fixed] Angular Mat-Table: Displaying a check or an x based on bool value

Issue

I am making a table in Angular and would like to have it show an image of a check or an ‘x’ based on the value of the element, which is a boolean. (I.e. true would be a check and false would be an ‘x’). Below is the code of how the table is currently set up. Any help would be appreciated it. Thanks in advance.

            <!-- Complete Column -->
            <ng-container matColumnDef="Completed">
              <mat-header-cell *matHeaderCellDef> Completed </mat-header-cell>
              <mat-cell *matCellDef="let element"> {{element.complete}} </mat-cell>
            </ng-container>

Solution

Try this.

<mat-cell *matCellDef="let element"> {{element.complete ? '&#10003;' : '&#10005;'}} </mat-cell>