Render a grid of items directly in Ionic 2/ Angular 2 template
<p>I have a list of items that I'd like to render in 3 col * x rows grid. I'm not sure how to do that in the Angular 2 or Ionic 2. Being reading through <a href="https://angular.io/docs/ts/latest/guide/template-syntax.html#" rel="nofollow">https://angular.io/docs/ts/latest/guide/template-syntax.html#</a> for a while now, here is what I did:</p>

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

<p>which doesn't work. As a work around, I can break my list of items into chunks before they are passed to the template, but I suppose it's a bit more elegant let the template handling it - if it can. </p>

<p>What are the correct directives and syntaxes to use?</p>