Geek Answers Handbook

Display a grid of elements directly in the Ionic 2 / Angular 2 template

I have a list of elements that I would like to display in a 3 col * x rows grid. I'm not sure how to do this in Angular 2 or Ionic 2. Looking through https://angular.io/docs/ts/latest/guide/template-syntax.html# for a while, here is what I did :

<ion-grid>
 <ion-row *ngIf="i%3 == 0" #i>
  <ion-col width-33 *ngFor="let item of items; let i=index" >
    <ion-card>
     <img src="{{item.image}}" />
      <ion-card-content>
        <ion-card-title>
          {{item.title}}
        </ion-card-title>
        <p></p>
      </ion-card-content>
    </ion-card>
   </ion-col>
  </ion-row>
</ion-grid>

which does not work. As a job, I can break the list of elements into pieces before they are passed to the template, but I believe that it is a little more elegant, let the template handle it - if possible.

What are the correct directives and syntaxes?

+4
source share
2 answers

, ionic/ angular.

, 4 (col-4) .

. 12 . col-6 2 , col-3 4 ..

 <ion-row wrap>
    <ion-col col-4  *ngFor="let image of imageList" (tap)="setAvatar(image)">
      <img [src]="image">
    </ion-col>
  </ion-row>
+4
<ion-content class="has-header">
  <div style="  display: flex; flex-wrap: wrap; align-items: stretch;">
    <div *ngFor="#s of items; let i = index" style="flex: 0 0 calc( 100% / 3 - 2px );">
      <img src="http://placehold.it/150x150" padding>{{i}}
    </div>
  </div>
</ion-content>

...

. plunker

http://plnkr.co/edit/8lbKDG?p=info

0

More articles:


All Articles