title: How to increment and update index value by 2 in ngFor while using a fixed structure
body: <p>I have a fixed template structure to print only two items in a row as below and i need to iterate using ngFor directive:</p>
  
  <pre><code> &lt;div class="row" *ngFor="let item of cityCodes; let i = index"&gt;
      &lt;div class="col-6" (click)="cityClick(item.key)"&gt;
        &lt;div class="img img-1"&gt;
  
        &lt;/div&gt;
        &lt;div class="img-text"&gt;
          {{cityCodes[i].value}}
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-6" (click)="cityClick(item.key)"&gt;
        &lt;div class="img img-2"&gt;
  
        &lt;/div&gt;
        &lt;div class="img-text"&gt;
          {{cityCodes[i+1].value}}
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  </code></pre>
  
  <p>As you can see in the above code I am using cityCodes json as below:</p>
  
  <pre><code>  cityCodes=[{12:'patna'},{23:'jaipur'},{21:'Baliya'},{23:'Canugh'}]
  </code></pre>
  
  <p>Since I have a fixed structure like two columns in a row, i am using cityCodes[i] and cityCodes[i+1] to print the images side by side.</p>
  
  <p>As I have already used [i+1]th item in the first row, ngFor is again starting with same item in the next row. How to update the index here.</p>