title: Loop through a list and insert html elements depending on Odd or Even in Angular
body: <p>I'm new to Angular and I'm trying to understand how to loop through a list </p>
  
  <p>Lets say I have a list like the one in the Tour of Heroes Tutorial.
  <a href="https://angular.io/tutorial/toh-pt2" rel="nofollow noreferrer">https://angular.io/tutorial/toh-pt2</a></p>
  
  <pre><code>    export const HEROES: Hero[] = [
    { id: 11, name: 'Mr. Nice' },
    { id: 12, name: 'Narco' },
    { id: 13, name: 'Bombasto' },
    { id: 14, name: 'Celeritas' },
    { id: 15, name: 'Magneta' }      
  ];
  </code></pre>
  
  <p>I use Bulma for styling and would like to insert the Heroes list in a Columns with two column pr row.
  <a href="https://bulma.io/documentation/columns/basics/" rel="nofollow noreferrer">https://bulma.io/documentation/columns/basics/</a></p>
  
  <p>The end result looking something like this.</p>
  
  <pre><code>     &lt;div class="container"&gt;
            &lt;div class="columns"&gt;
               &lt;div class="column"&gt;
                  11 Mr. Nice
               &lt;/div&gt;
              &lt;div class="column"&gt;
                  12 Narco
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="columns"&gt;
               &lt;div class="column"&gt;
                  13 Bombasto
               &lt;/div&gt;
              &lt;div class="column"&gt;
                  14 Celeritas
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="columns"&gt;
               &lt;div class="column"&gt;
                  15 Magneta
               &lt;/div&gt;
              &lt;div class="column"&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>There is some documentation about values like first, last, even &amp; odd
  <a href="https://angular.io/api/common/NgForOf" rel="nofollow noreferrer">https://angular.io/api/common/NgForOf</a></p>
  
  <p>But I can't figure out how to use them. Because if the element i <em>Odd</em> Then I would have to  add the start element  <code>&lt;div class="columns"&gt;</code> and if its <em>Even</em> i would have to add the closing element  and of course the special case where the list contains and odd numbers of elements, then I would have to add an empty <code>&lt;div class="column"&gt;&lt;/div&gt;</code></p>