title: Display array data to 3 column using angular2 & bootstrap
body: <p>In my angular2 component I have listed data and I want to display those data into 3 column by using booststrap class(col-md-4).</p>
  
  <p>For example, I have json object like below.</p>
  
  <pre><code>{
  "menuList":[
      {"id":1,"sn":"nd","name":"Noodles"},
      {"id":2,"sn":"sd","name":"Salad"},
      {"id":3,"sn":"sp","name":"Soup"},
      {"id":4,"sn":"fb","name":"Fresh Bowl"},
      {"id":5,"sn":"sn","name":"Snacks"},
      {"id":6,"sn":"pz","name":"Pizza"},
      {"id":7,"sd":"nd","name":"Sandwich"}
  ]
  </code></pre>
  
  <p>}</p>
  
  <p>And I want to display the name into 3 column.</p>
  
  <p>Noodles              Salad                 Soup
  Fresh Bowl           Snacks                Sandwich</p>
  
  <p>Here is my code that I tried.</p>
  
  <pre><code>&lt;div *ngFor="let menu of menuList; #i=index" *ngIf="i % 3 == 0" class="row"&gt;
      &lt;div class="col-md-4"&gt;{{menu[$i].name}}&lt;/div&gt;
      &lt;div class="col-md-4"&gt;{{menu[$i + 1].name}}&lt;/div&gt;
      &lt;div class="col-md-4"&gt;{{menu[$i + 2].name}}&lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>But it display error, because first of all I cannot use ngFor &amp; ngIf in a same element.</p>
  
  <p>Please give me a solution. </p>