ionic2 : creating gallery grid

Question

I want to create responsive gallery grid with 3 columns. I am iterating over array of images with below code:

<ion-grid>
    <ion-row *ngFor="let image of images; let i = index;" *ngIf="{{i % 3 === 0}}">
        <ion-col col-4 (click)="openPhoto(image)" *ngIf="{{i < images.length}}">
            <img [src]="images[i].url" />
        </ion-col>
        <ion-col col-4 (click)="openPhoto(image)" *ngIf="{{i+1 < images.length}}">
            <img [src]="images[i+1].url" />
        </ion-col>
        <ion-col col-4 (click)="openPhoto(image)" *ngIf="{{i+2 < images.length}}">
            <img [src]="images[i+2].url" />
        </ion-col>
    </ion-row>
</ion-grid>

But its showing error as below:

Can't have multiple template bindings on one element. Use only one attribute named 'template' or prefixed with * ("

    <ion-grid>
        <ion-row *ngFor="let image of images; let i = index;" [ERROR ->]*ngIf="{{i % 3 === 0}}">
            <ion-col col-4 (click)="openPhoto(image)" *ngIf="{{i < images.le"): ng:///AppModule/PhotoGalleryPage.html@16:62
TypeError: Cannot read property 'toUpperCase' of undefined ("

    <ion-grid>
        <ion-row *ngFor="let image of images; let i = index;" [ERROR ->]*ngIf="{{i % 3 === 0}}">
            <ion-col col-4 (click)="openPhoto(image)" *ngIf="{{i < 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. ("

    <ion-grid>
        <ion-row *ngFor="let image of images; let i = index;" [ERROR ->]*ngIf="{{i % 3 === 0}}">
            <ion-col col-4 (click)="openPhoto(image)" *ngIf="{{i < 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}}">
            <ion-col col-4 [ERROR ->](click)="openPhoto(image)" *ngIf="{{i < images.length}}">
                <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}}">
            <ion-col col-4 [ERROR ->](click)="openPhoto(image)" *ngIf="{{i < images.length}}">
                <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}}">

I am not able to understand the error as I am newbie in Ionic2. Can anyone help me with this ?

score 1 · Accepted Answer · answered Jun 09 '17 at 14:25

My first mistake was to place those curly braces in *ngIf condition and when I removed braces and re-run the project, it gave the the error like:

Can't have multiple template bindings on one element. Use only one attribute named 'template' or prefixed with *

So, after searching for the solution on this, I came across this SO answer: https://stackoverflow.com/a/40860957/1739882

Hence, my solution was:

<ion-grid>
    <div *ngFor="let image of images; let i = index;">
        <ion-row *ngIf="i % 3 === 0">
            <ion-col col-4 (click)="openPhoto(image)" *ngIf="i < images.length">
                <img [src]="images[i].url" />
            </ion-col>
            <ion-col col-4 (click)="openPhoto(image)" *ngIf="i+1 < images.length">
                <img [src]="images[i+1].url" />
            </ion-col>
            <ion-col col-4 (click)="openPhoto(image)" *ngIf="i+2 < images.length">
                <img [src]="images[i+2].url" />
            </ion-col>
        </ion-row>
    </div>
</ion-grid>

score 0 · Answer 2 · answered Feb 08 '18 at 16:31

0

Generic ionic2 image grid. You can configure n number of columns. Ionic2 multi columns Image Grid

answered Feb 08 '18 at 16:31

Anil8753

2,663
4
29
40

ionic2 : creating gallery grid

2 Answers2