title: Make an Angular *ngFor draw two different columns of data
body: <p>I'm trying to make a *ngFor directive to put data in two columns, instead of just one column as usual. I even followed an example I saw over there, but it didn't work at all. Let's start with the graphic part:</p>
  
  <p>I've got this:
  <a href="https://i.stack.imgur.com/Bg90z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Bg90z.png" alt="enter image description here"></a></p>
  
  <p>... but I want it to look like this (so I can fit more items than before without making the card bigger):
  <a href="https://i.stack.imgur.com/9Evyq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9Evyq.png" alt="enter image description here"></a></p>
  
  <p>This is the code I currently have, which does absolutely nothing (it just shows the first image):</p>
  
  <pre><code>&lt;div class="col-6-md" *ngFor="let level of config?.selectedLevels; let i = index"&gt;
        &lt;div class="col-md-6" class="left-style" *ngIf="i%2 == 0"&gt;
            &lt;a href="javascript:void(0)" [style.cursor]="cursor(level)"  class="btn-flat white separator" (click)="deselectLevel(level)"&gt;
                &lt;i class="fa fa-times"&gt;
                &lt;/i&gt; 
                {{ level?.label || level }}
              &lt;/a&gt;          
        &lt;/div&gt;  
        &lt;div class="col-md-6" class="right-style" *ngIf="i%2 != 0"&gt;
            &lt;a href="javascript:void(0)" [style.cursor]="cursor(level)"  class="btn-flat white separator" (click)="deselectLevel(level)"&gt;
                &lt;i class="fa fa-times"&gt;
                &lt;/i&gt; 
                {{ level?.label || level }}
              &lt;/a&gt;           
        &lt;/div&gt;  
  &lt;/div&gt;
  </code></pre>
  
  <p>This uses the following CSS:</p>
  
  <pre><code>.left-style{
      float:left;
      width:45%;
  }
  .right-style{
      float:right;
      width:45%;
  }
  </code></pre>
  
  <p>I know it wouldn't be needed in this example, but it was just a try. I'm quite confused why this is not working at all. Inside the created divs, the bootstrap classes (col-md-6) are not being applied at all.</p>
  
  <p>Why is this happening?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Let me expand a little how the app looks like so it's easy to find out what's going on. After trying other methods that didn't really work, I guess it's time to give you a wider view of what this looks like in order to find out how to fix this weird thing.</p>
  
  <p>The parent component uses "cards" like the one you see upper in this post. So, the main template looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/0MpmK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0MpmK.png" alt="enter image description here"></a></p>
  
  <p>The "cards" component has a ng-content which draws inside another component that I provide, as you could see in the parent component's implementation. This is the cards component: </p>
  
  <pre><code>import { Component, Input } from '@angular/core';
  
  
  @Component({
      selector: "card",
      styleUrls: ["./card.css"],
      template: `
      &lt;div class="col card"&gt;
        &lt;div class="row card-header"&gt;
          {{title}}
        &lt;/div&gt;
        &lt;div class="margin"&gt;
        &lt;ng-content&gt;&lt;/ng-content&gt;
  
      &lt;/div&gt;
      `
  })
  
  export class Card{
  
      @Input() title: string;
  
      constructor(){
  
      }
  
  }
  </code></pre>
  
  <p>Somehow, just as I stated in the comments of the first proposed answer, the divs aren't compiling the bootstrap classes as they normally would:</p>
  
  <p><a href="https://i.stack.imgur.com/geOge.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/geOge.png" alt="enter image description here"></a></p>
  
  <p>It's becoming really weird at this moment. Can anyone spot what's wrong here?</p>