title: ionic2 : creating gallery grid
body: <p>I want to create responsive gallery grid with 3 columns. I am iterating over array of images with below code:</p>
  
  <pre><code>&lt;ion-grid&gt;
      &lt;ion-row *ngFor="let image of images; let i = index;" *ngIf="{{i % 3 === 0}}"&gt;
          &lt;ion-col col-4 (click)="openPhoto(image)" *ngIf="{{i &lt; images.length}}"&gt;
              &lt;img [src]="images[i].url" /&gt;
          &lt;/ion-col&gt;
          &lt;ion-col col-4 (click)="openPhoto(image)" *ngIf="{{i+1 &lt; images.length}}"&gt;
              &lt;img [src]="images[i+1].url" /&gt;
          &lt;/ion-col&gt;
          &lt;ion-col col-4 (click)="openPhoto(image)" *ngIf="{{i+2 &lt; images.length}}"&gt;
              &lt;img [src]="images[i+2].url" /&gt;
          &lt;/ion-col&gt;
      &lt;/ion-row&gt;
  &lt;/ion-grid&gt;
  </code></pre>
  
  <p>But its showing error as below:</p>
  
  <pre><code>Can't have multiple template bindings on one element. Use only one attribute named 'template' or prefixed with * ("
  
      &lt;ion-grid&gt;
          &lt;ion-row *ngFor="let image of images; let i = index;" [ERROR -&gt;]*ngIf="{{i % 3 === 0}}"&gt;
              &lt;ion-col col-4 (click)="openPhoto(image)" *ngIf="{{i &lt; images.le"): ng:///AppModule/PhotoGalleryPage.html@16:62
  TypeError: Cannot read property 'toUpperCase' of undefined ("
  
      &lt;ion-grid&gt;
          &lt;ion-row *ngFor="let image of images; let i = index;" [ERROR -&gt;]*ngIf="{{i % 3 === 0}}"&gt;
              &lt;ion-col col-4 (click)="openPhoto(image)" *ngIf="{{i &lt; images.le"): ng:///AppModule/PhotoGalleryPage.html@16:62
  Can't bind to '*ngIf' since it isn't a known property of 'ion-row'.
  1. If 'ion-row' is an Angular component and it has '*ngIf' input, then verify that it is part of this module.
  2. If 'ion-row' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
  3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
  
      &lt;ion-grid&gt;
          &lt;ion-row *ngFor="let image of images; let i = index;" [ERROR -&gt;]*ngIf="{{i % 3 === 0}}"&gt;
              &lt;ion-col col-4 (click)="openPhoto(image)" *ngIf="{{i &lt; images.le"): ng:///AppModule/PhotoGalleryPage.html@16:62
  Parser Error: Unexpected token {, expected identifier, keyword, or string at column 2 in [{{i % 3 === 0}}] in ng:///AppModule/PhotoGalleryPage.html@16:62 ("ow *ngFor="let image of images; let i = index;" *ngIf="{{i % 3 === 0}}"&gt;
              &lt;ion-col col-4 [ERROR -&gt;](click)="openPhoto(image)" *ngIf="{{i &lt; images.length}}"&gt;
                  &lt;img [src]="images[i].url" "): ng:///AppModule/PhotoGalleryPage.html@17:27
  Parser Error: Missing expected : at column 14 in [{{i % 3 === 0}}] in ng:///AppModule/PhotoGalleryPage.html@16:62 ("ow *ngFor="let image of images; let i = index;" *ngIf="{{i % 3 === 0}}"&gt;
              &lt;ion-col col-4 [ERROR -&gt;](click)="openPhoto(image)" *ngIf="{{i &lt; images.length}}"&gt;
                  &lt;img [src]="images[i].url" "): ng:///AppModule/PhotoGalleryPage.html@17:27
  Parser Error: Unexpected token } at column 14 in [{{i % 3 === 0}}] in ng:///AppModule/PhotoGalleryPage.html@16:62 ("ow *ngFor="let image of images; let i = index;" *ngIf="{{i % 3 === 0}}"&gt;
  </code></pre>
  
  <p>I am not able to understand the error as I am newbie in Ionic2. Can anyone help me with this ?</p>