title: ngFor Template parse errors: Parser Error: Unexpected token = at column
body: <p>I am writing an Angular app, built with Angular CLI. I have a model called <code>globalModel</code> in my component. This model will be built using the user inputs in the previous page. In this current page, I am displaying the data contained in this model to the user in a HTML table. Here's how i do it:  </p>
  
  <pre><code>&lt;input type="radio" [(ngModel)]="criteria1" name="parameter1Identifier"&gt;Class A
  &lt;input type="radio" [(ngModel)]="criteria1" name="parameter1Identifier"&gt;Class B
  .
  .
  
  &lt;input type="radio" [(ngModel)]="criteria2" name="parameter2Identifier"&gt;Type 1
  &lt;input type="radio" [(ngModel)]="criteria2" name="parameter2Identifier"&gt;Type 2
  .
  .
  
  &lt;table&gt;
  &lt;thead&gt;
    &lt;tr *ngIf="tableColumnCount"&gt;
      &lt;th *ngFor="let colNumber of tableColumnCount | rangePipe"&gt;
        &lt;input type="checkbox"
               [checked]=false
               (click)="selectAllElementsInColumnOfTheTableIn(colNumber);"&gt;
        select column {{ n + 1 }}
      &lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  
  &lt;tbody&gt;
    &lt;tr *ngFor="let row of globalModel | modelToArrayOfArraysFilter: criteria1: criteria2;"&gt;  
       &lt;td *ngFor="let acol of row; let i = index; totalColumnsOfTheTable = row.length"&gt;      &lt;--- Error!
           ....
       &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>And the <code>totalColumnsOfTheTable</code> is defined in the component as follows: </p>
  
  <pre><code>set totalColumnsOfTheTable(count: number) {
      if ( this.tableColumnCount &lt; count ) {
        this.tableColumnCount = count;
        this._cd.detectChanges();
      }
  }
  </code></pre>
  
  <p>The <code>row</code> of this table can have any number of elements like [obj], [obj1, obj2], [objA, objB, objC], [objN], ... This data is filtered from the model based on the <code>criteria1</code> and <code>criteria2</code> which the user selects on the radio button. So based on this, the table data gets populated. The variable <code>tableColumnCount</code> will have the count of the total number of columns and the table should update accordingly.  To determine the total column count I am trying to use the setter in <code>*ngFor</code> as <code>totalColumnsOfTheTable = row.length</code>.  </p>
  
  <p>But, Angular throws error like </p>
  
  <blockquote>
    <p>"Template parse errors: Parser Error: Unexpected token = at column 65
    in [let acol of row; let i = index; totalColumnsOfTheTable =
    index] ".</p>
  </blockquote>
  
  <p>I tried using the <code>trackBy</code> to acheve the same. I figured out that the <code>this</code> doesn't refer to 'component'. So, if i call <code>this.totalColumnsOfTheTable = index</code> doesn't work!<br>
  Please help me to determine the total column count or any other way to set the component variables within <code>*ngFor</code> loop. Any help is greatly appreciated. Any suggestions to the approach is most welcome!</p>