title: *ngIf not being evaluated
body: <p>I've been trying to make reusable <strong>CRUD Table Component</strong> in <strong>Angular 7</strong>, using <strong>Angular Material</strong>, where i can pass any array of data objects and the table renders the data.</p>
  
  <p>In that Table component i am also passing array of links in pair with column name i want to attach link to, example:</p>
  
  <p><strong>redirectionLinks = [ {link: '/students', column: 'name} ... ]</strong></p>
  
  <p><strong>TableComponent:</strong></p>
  
  <p>template:</p>
  
  <pre><code>&lt;table mat-table [dataSource]="dataList | filterByName:searchValue" class="mat-elevation-z8"&gt;
  
    &lt;ng-container *ngFor="let column of columnList; let i = index;" matColumnDef="{{column}}"&gt;
  
      &lt;ng-container *ngIf="column!=='Delete' &amp;&amp; column!=='Edit'"&gt;
  
        &lt;th mat-header-cell *matHeaderCellDef&gt; {{column}} &lt;/th&gt;
  
        &lt;ng-container *ngFor="let linkObj of redirectionLinks;let j = index;"&gt;
  
          &lt;ng-container *ngIf="column === linkObj.column;"&gt;
            &lt;td mat-cell *matCellDef="let item" [routerLink]="[linkObj.link, item.id]" class="td-hoverable"&gt; {{item[objKeys[i]]}}&lt;/td&gt;
          &lt;/ng-container&gt;
  
          &lt;ng-container *ngIf="column !== linkObj.column;"&gt;
            &lt;td mat-cell *matCellDef="let item"&gt; {{item[objKeys[i]]}} &lt;/td&gt;
          &lt;/ng-container&gt;
  
  
  
        &lt;/ng-container&gt;
  
      &lt;/ng-container&gt;
  
  
  
  
      &lt;ng-container *ngIf="column=='Delete'"&gt;
        &lt;th mat-header-cell *matHeaderCellDef&gt; Delete &lt;/th&gt;
        &lt;td mat-cell *matCellDef="let item"&gt; &lt;button mat-button color="error" (click)="deleteItem(item)"&gt;Delete&lt;/button&gt;&lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container *ngIf="column=='Edit'"&gt;
        &lt;th mat-header-cell *matHeaderCellDef&gt; Edit &lt;/th&gt;
        &lt;td mat-cell *matCellDef="let item"&gt; &lt;button mat-button color="accent" (click)="editItem(item)"&gt;Edit&lt;/button&gt; &lt;/td&gt;
      &lt;/ng-container&gt;
  
  
  
  
    &lt;/ng-container&gt;
  
    &lt;tr mat-header-row *matHeaderRowDef="columnList"&gt;&lt;/tr&gt;
    &lt;tr mat-row *matRowDef="let item; columns: columnList;"&gt;&lt;/tr&gt;
  
  
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>TableComponent</strong>:
  logic:</p>
  
  <pre><code>@Input() dataList;
  @Input() searchValue: string;
  @Input() columnList;
  @Input() redirectionLinks;
  
  @Output() emitDeleteEvent = new EventEmitter();
  @Output() emitEditEvent = new EventEmitter();
  
  objKeys = [];
  
  console = console;
  
  ngOnInit(): void {
  
      // since every object has same props we use the first one -&gt; [0]
      this.objKeys = Object.keys(this.dataList[0]);
  
      // add edit and delete cols
      this.columnList.push('Delete');
      this.columnList.push('Edit');
  
  
  
  
  }
  
  
  deleteItem(item) {
      this.emitDeleteEvent.emit(item);
  }
  
  editItem(item) {
      this.emitEditEvent.emit(item);
  }
  
  ngOnDestroy() {
      console.log("im destroyed");
  }
  </code></pre>
  
  <p><strong>StudentsPageComponent(parent)</strong></p>
  
  <p>template:</p>
  
  <pre><code>&lt;h2 class="centered-header"&gt;Students&lt;/
      &lt;app-search (searchEvent)="getSearchValue($event)"&gt;&lt;/app-search&gt;
      &lt;app-table-crud
         (emitDeleteEvent)="deleteStudent($event)"
         (emitEditEvent)="editStudent($event)"
         [dataList]="students"
         [columnList]="tableColumns"
         [searchValue]="searchValue"
         [redirectionLinks]="redirectionLinks"
      &gt;&lt;/app-table-crud&gt;
  </code></pre>
  
  <p><strong>Logic</strong>:</p>
  
  <pre><code>export class StudentsPageComponent {
  
  students = [
      { id: '1', name: 'Stefanos Lalic', billAccount: '15123512', accountBalance: '$423.00' },
      { id: '2', name: 'Anastasia Lalic', billAccount: '51231252', accountBalance: '$1423.00' },
      { id: '3', name: 'Olivia Lalic', billAccount: '31515231', accountBalance: '$5122.00'}
  ];
  
  tableColumns = ['ID', 'Name', 'Bill Acc', 'Balance'];
  
  redirectionLinks = [
      {link: '/billAccount', column: 'Bill Acc'},
      {link: '/student', column: 'Name'}
  ];
  
  searchValue: string;
  
  
  getSearchValue(searchValue) {
      this.searchValue = searchValue;
  }
  
  deleteStudent(student) {
      console.log(student);
  }
  
  editStudent(student) {
      console.log(student);
  }
  </code></pre>
  
  <p>}</p>
  
  <p><a href="https://i.stack.imgur.com/jetOK.png" rel="nofollow noreferrer">This is how it looks rendered, keep in mind that only Bill Acc links are rendered, while /student link is being ignored</a></p>