title: Using Mat-icons and Mat-content with *ngif - angular 12
body: <p>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 &quot;N/A&quot;</p>
  <p>I have 3 options -</p>
  <ul>
  <li>Show &quot;N/A&quot; if it is not applicable</li>
  <li>Show <code>&lt;mat-icon&gt;</code> if the exam is valid</li>
  <li>Show <code>&lt;mat-icon&gt;</code> if the exam is invalid valid</li>
  </ul>
  <p>I introduced the &quot;N/A&quot; bit to my code just now. Earlier, I had only the two <code>&lt;mat-icon&gt;</code> options and my code was working fine.</p>
  <p>Now, when I try to open my HTML, it never shows the <code>&lt;mat-icon&gt;</code> for Exam D and Exam E. The column is blank.
  It only just shows &quot;N/A&quot; for the other 3 Exams.</p>
  <p>Can anyone please help me and let me know what I'm missing or something I've done wrong.</p>
  <p>I have JSON data which looks like this.</p>
  <pre><code>[
  {&quot;valid&quot;:&quot;Not Applicable&quot;,&quot;validityDate&quot;:&quot;&quot;,&quot;name&quot;:&quot;Exam A&quot;},
  {&quot;valid&quot;:&quot;Not Applicable&quot;,&quot;validityDate&quot;:&quot;&quot;,&quot;name&quot;:&quot;Exam B&quot;},
  {&quot;valid&quot;:&quot;Not Applicable&quot;,&quot;validityDate&quot;:&quot;&quot;,&quot;name&quot;:&quot;Exam C&quot;},
  {&quot;valid&quot;:&quot;Yes&quot;,&quot;validityDate&quot;:&quot;23-01-2022&quot;,&quot;name&quot;:&quot;Exam D&quot;}, 
  {&quot;valid&quot;:&quot;No&quot;,&quot;validityDate&quot;:&quot;23-01-2017&quot;,&quot;name&quot;:&quot;Exam E&quot;}
  ]
  </code></pre>
  <p>I'm trying to display this in a table. My angular template is as below -</p>
  <p>My component.ts, where I read the JSON response and add it into an object, has something like this -</p>
  <pre><code>    const EXAM_DATA: Array&lt;TrainingElement&gt; = [
    { 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;
  </code></pre>
  <p>My HTML template is something like below -</p>
  <pre><code>   &lt;table mat-table [dataSource]=&quot;dataSource&quot; class=&quot;mat-elevation-z8&quot;&gt;
  
        &lt;!--- Note that these columns can be defined in any order.
                The actual rendered columns are set as a property on the row definition&quot; --&gt;
        &lt;ng-container matColumnDef=&quot;title&quot;&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt; Exam Title &lt;/th&gt;
          &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt; {{element.title}} &lt;/td&gt;
        &lt;/ng-container&gt;
  
        &lt;ng-container matColumnDef=&quot;status&quot;&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt; Status &lt;/th&gt;
          &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt;
            &lt;mat-icon *ngIf=&quot;element.status == 'Yes'&quot; [ngStyle]=&quot;{'color':'green'}&quot; matTooltipPosition=&quot;right&quot;
              matTooltipClass=&quot;mattooltip&quot; matTooltip={{element.date}}&gt;done_outline&lt;/mat-icon&gt;
            &lt;mat-icon *ngIf=&quot;element.status == 'No'&quot; [ngStyle]=&quot;{'color':'orange'}&quot; matTooltipPosition=&quot;right&quot;
              matTooltipClass=&quot;mattooltip&quot; matTooltip={{element.date}}&gt;report_problem&lt;/mat-icon&gt;
            &lt;mat-content *ngIf=&quot;element.status == 'Not Applicable'&quot;&gt;N/A&lt;/mat-content&gt;
          &lt;/td&gt;
        &lt;/ng-container&gt;
  
        &lt;tr mat-header-row *matHeaderRowDef=&quot;showColumns&quot;&gt;&lt;/tr&gt;
        &lt;tr mat-row *matRowDef=&quot;let row; columns: showColumns;&quot;&gt;&lt;/tr&gt;
      &lt;/table&gt;
  </code></pre>