title: ionic 2 how to load dynamically with index
body: <p>For ionic 1 i have done like <code>ng-if="$index % 3 === 0"</code> But i need to load the data dynamically in grid view with two col in one row. How can i do that. i tried below code :</p>
  
  <p>in my <strong>schudle.ts :</strong></p>
  
  <pre><code>ResourceData = [{ name: "ksjs" },{ name: "daa" },{ name: "das" }, {name: "das" }, {name: "Computer Science" }, { name: "Moc" }]
  </code></pre>
  
  <p>My <strong>html :</strong></p>
  
  <pre><code> &lt;div class="item item-body no-padding" style="border-width: 0px !important; overflow-y:hidden;height: 65%;"&gt;
  
                  &lt;div class="row no-padding" style="height: 65%;" *ngFor="let data of ResourceData" *ngIf="index % 2 == 0"&gt;
                      &lt;div class="col col-50 custom-design2" style="background: url(url) no-repeat center;background-size: cover;"&gt;
                          &lt;div class="custom-design1"&gt;&lt;span class="grid-title"&gt;{{data[index].name}}&lt;/span&gt;&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="col col-50 custom-design2" style="background: url(url) no-repeat center;background-size: cover;"&gt;
                          &lt;div class="custom-design1"&gt;&lt;span class="grid-title"&gt;{{data[index + 1].name}}&lt;/span&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  &lt;/div
  </code></pre>
  
  <p>But it din work . May be that <code>ngif</code> may be wrong. please tell me how can i solve this.</p>
  
  <p>i need like this :</p>
  
  <pre><code>as      fa
  
  fas     faaf
  
  faf      faf
  
  fafa     fafaf
  </code></pre>
  
  <p>So two col per row. Please tell me what i am doing wrong !!</p>
  
  <p>Thanks</p>
  
  <p><strong>ionic 1</strong></p>
  
  <pre><code> &lt;div class="row no-padding" ng-repeat="mydash in Data"  ng-if="$index % 3 === 0"&gt;
                  &lt;div class="col col-30 custom-design2" style="background: url({{Data[$index].Image}}) no-repeat center;background-size: cover;" ng-click="changestate(Data[$index])" ng-if="$index &lt; Data.length"&gt;
                      &lt;div class="custom-design1"&gt;&lt;span class="grid-title"&gt;{{Data[$index].name}}&lt;/span&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col col-30 custom-design2" style="background: url({{Data[$index + 1].Image}}) no-repeat center;background-size: cover; " ng-click="changestate(Data[$index + 1])" ng-if="$index + 1 &lt; Data.length"&gt;
                      &lt;div class="custom-design1"&gt;&lt;span class="grid-title"&gt;{{Data[$index + 1].name}}&lt;/span&gt;&lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="col col-30 custom-design2" style="background: url({{Data[$index + 2].Image}}) no-repeat center;background-size: cover; " ng-click="changestate(Data[$index + 2])" ng-if="$index + 2 &lt; Data.length"&gt;
                      &lt;div class="custom-design1"&gt;&lt;span class="grid-title"&gt;{{Data[$index + 2].name}}&lt;/span&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt; 
  </code></pre>