title: ngIf in ng-container inside mat-table
body: <p>I am new to Angular. 
  I have a following problem: I need to display on a table only rows with status == "FINISHED". I understand why my code doesn't work the way I want, but can't get the right solution for me.</p>
  
  <p>Here is the .ts file:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
   import { TestCase } from '../test-cases/models/test-case.model';
   import { TestCaseService } from '../test-case.service';
  
  @Component({
    selector: 'app-test-cases-view',
    templateUrl: './test-cases-view.component.html',
    styleUrls: ['./test-cases-view.component.css']
  })
  export class TestCasesViewComponent implements OnInit {
    testCases: TestCase[];
    displayedColumns: string[] = ['testCaseName', 'testCaseDescription','id','created','status', 'xls'];
    constructor(private testCaseService: TestCaseService) { }
  
    ngOnInit() {
      this.getTestCases();
    }
  
    postRequest(testCaseId: string):void {
      this.testCaseService.postTestResult(testCaseId);
    }
  
    getTestCases(): void {
      this.testCaseService.getTestCases()
        .subscribe(testCases =&gt; this.testCases = testCases);
    }
  
  }
  </code></pre>
  
  <p>test-case.model.ts file:</p>
  
  <pre><code>import { TestCaseParams } from './test-case-params.model';
  
  export class TestCase {
    public testCaseName:string;
    public testCaseDescription:string;
    public parameters:TestCaseParams;
    public id:string;
  
    constructor () {
      this.parameters= new TestCaseParams();
    }
  }
  </code></pre>
  
  <p>test-case-params.model.ts</p>
  
  <pre><code>import { EditedVar } from './replacement.model';
  import { FilterVar } from './filter.model';
  import { OutputVar } from './output.model';
  
  export class TestCaseParams {
    public appsCount: number;
    public algId: number;
    public product: string;
    public invokeConsolidation: boolean;
    public invokeProdStrategy: boolean;
    public filterVars: FilterVar[];
    public editedVars: EditedVar[];
    public outputVars: OutputVar[];
    public fromDate: Date;
    public toDate:Date;
  }
  </code></pre>
  
  <p>replacement.model.ts:</p>
  
  <pre><code>export class EditedVar {
    public path:string;
    public value:string;
  }
  </code></pre>
  
  <p>filter.model.ts:</p>
  
  <pre><code>export class FilterVar{
    public filter:string;
    public filterType:string;
    public filterValue:string;
    public varch:boolean;
  }
  </code></pre>
  
  <p>output.model.ts:</p>
  
  <pre><code>export class OutputVar {
    public path:string;
    public alias:string;
    public type:string;
  }
  </code></pre>
  
  <p>Here is the html file that works:</p>
  
  <pre><code>&lt;div id="view-component"&gt;
    &lt;h2&gt;Test Cases&lt;/h2&gt;
  
    *some code just don't fit in the question*
  
      &lt;ng-container matColumnDef="xls"&gt;
        &lt;th mat-header-cell *matHeaderCellDef&gt; Xls report &lt;/th&gt;
        &lt;td mat-cell *matCellDef="let testCase"&gt;
          &lt;button *ngIf = "testCase.status == 'FINISHED'" (click)="postRequest(testCase.id)"&gt;Make Excel report&lt;/button&gt;
        &lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;tr mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/tr&gt;
      &lt;tr mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is what I try to do:</p>
  
  <pre><code>&lt;table mat-table [dataSource]="testCases" class="mat-elevation-z8"&gt;
  
      &lt;ng-container *ngIf = "testCase.status == 'FINISHED'" matColumnDef="testCaseName"&gt;
        &lt;th mat-header-cell *matHeaderCellDef&gt; testCaseName &lt;/th&gt;
        &lt;td mat-cell *matCellDef="let testCase"&gt; {{testCase.testCaseName}} &lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container *ngIf = "testCase.status == 'FINISHED'" matColumnDef="testCaseDescription"&gt;
        &lt;th mat-header-cell *matHeaderCellDef&gt; testCaseDescription &lt;/th&gt;
        &lt;td mat-cell *matCellDef="let testCase"&gt; {{testCase.testCaseDescription}} &lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container *ngIf = "testCase.status == 'FINISHED'" matColumnDef="id"&gt;
        &lt;th mat-header-cell *matHeaderCellDef&gt; Report Id &lt;/th&gt;
        &lt;td mat-cell *matCellDef="let testCase"&gt; {{testCase.id}} &lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container *ngIf = "testCase.status == 'FINISHED'" matColumnDef="created"&gt;
        &lt;th mat-header-cell *matHeaderCellDef&gt; Created &lt;/th&gt;
        &lt;td mat-cell *matCellDef="let testCase"&gt; {{testCase.created | date: 'dd/MM/yyyy hh:mm:ss'}} &lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container *ngIf = "testCase.status == 'FINISHED'" matColumnDef="status"&gt;
        &lt;th mat-header-cell *matHeaderCellDef&gt; Status &lt;/th&gt;
        &lt;td mat-cell *matCellDef="let testCase"&gt; {{testCase.status}} &lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container *ngIf = "testCase.status == 'FINISHED'" matColumnDef="xls"&gt;
        &lt;th mat-header-cell *matHeaderCellDef&gt; Xls report &lt;/th&gt;
        &lt;td mat-cell *matCellDef="let testCase"&gt;
          &lt;button (click)="postRequest(testCase.id)"&gt;Make Excel report&lt;/button&gt;
        &lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;tr mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/tr&gt;
      &lt;tr mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/tr&gt;
    &lt;/table&gt;
  </code></pre>
  
  <p>As you can see I don't want to display rows with any status that isn't equeal "FINISHED". For this code I get a following error:</p>
  
  <blockquote>
    <p>ERROR TypeError: Cannot read property 'status' of undefined
        at Object.eval [as updateDirectives] (TestCasesViewComponent.html:6)</p>
  </blockquote>
  
  <p>I understand that I need to place <code>let testCase</code> somewhere else, so it would be defined on the ng-container level, but I can't figure out where.</p>