Using Mat-icons and Mat-content with *ngif - angular 12

Question

In an angular template, I'm trying to create a table and within a particular column, based on the data, I'd like to show either a mat-icon or simply write "N/A"

I have 3 options -

• Show "N/A" if it is not applicable
• Show <mat-icon> if the exam is valid
• Show <mat-icon> if the exam is invalid valid

I introduced the "N/A" bit to my code just now. Earlier, I had only the two <mat-icon> options and my code was working fine.

Now, when I try to open my HTML, it never shows the <mat-icon> for Exam D and Exam E. The column is blank. It only just shows "N/A" for the other 3 Exams.

Can anyone please help me and let me know what I'm missing or something I've done wrong.

I have JSON data which looks like this.

[
{"valid":"Not Applicable","validityDate":"","name":"Exam A"},
{"valid":"Not Applicable","validityDate":"","name":"Exam B"},
{"valid":"Not Applicable","validityDate":"","name":"Exam C"},
{"valid":"Yes","validityDate":"23-01-2022","name":"Exam D"}, 
{"valid":"No","validityDate":"23-01-2017","name":"Exam E"}
]

I'm trying to display this in a table. My angular template is as below -

My component.ts, where I read the JSON response and add it into an object, has something like this -

    const EXAM_DATA: Array<TrainingElement> = [
  { title: this.userExamJson[0].name, status: this.userExamJson[0].valid, date: this.userExamJson[0].validityDate },
  { title: this.userExamJson[1].name, status: this.userExamJson[1].valid, date: this.userExamJson[1].validityDate },
  { title: this.userExamJson[2].name, status: this.userExamJson[2].valid, date: this.userExamJson[2].validityDate },
  { title: this.userExamJson[3].name, status: this.userExamJson[3].valid, date: this.userExamJson[3].validityDate },
  { title: this.userExamJson[4].name, status: this.userExamJson[4].valid, date: this.userExamJson[4].validityDate },
];

this.dataSource = EXAM_DATA;

My HTML template is something like below -

   <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

      <!--- Note that these columns can be defined in any order.
              The actual rendered columns are set as a property on the row definition" -->
      <ng-container matColumnDef="title">
        <th mat-header-cell *matHeaderCellDef> Exam Title </th>
        <td mat-cell *matCellDef="let element"> {{element.title}} </td>
      </ng-container>

      <ng-container matColumnDef="status">
        <th mat-header-cell *matHeaderCellDef> Status </th>
        <td mat-cell *matCellDef="let element">
          <mat-icon *ngIf="element.status == 'Yes'" [ngStyle]="{'color':'green'}" matTooltipPosition="right"
            matTooltipClass="mattooltip" matTooltip={{element.date}}>done_outline</mat-icon>
          <mat-icon *ngIf="element.status == 'No'" [ngStyle]="{'color':'orange'}" matTooltipPosition="right"
            matTooltipClass="mattooltip" matTooltip={{element.date}}>report_problem</mat-icon>
          <mat-content *ngIf="element.status == 'Not Applicable'">N/A</mat-content>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="showColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: showColumns;"></tr>
    </table>

Answer 1

try this,

check your mattooltip css class properly.

      <ng-container matColumnDef="status">
        <th mat-header-cell *matHeaderCellDef> Status </th>
        <td mat-cell *matCellDef="let element">
   
          <span *ngIf="element.status === 'Not Applicable'; else showStatusIcons">N/A</span>

          <ng-template #showStatusIcons>
            <div matTooltipPosition="right" matTooltipClass="mattooltip" matTooltip={{element.date}}>
              <mat-icon [ngStyle]="{'color': element.status === 'Yes' ? 'green' : 'orange'}">{{ element.status === 'Yes' ? 'done_outline' : 'report_problem' }}</mat-icon>
            </div>
          </ng-template>
        </td>
      </ng-container>