title: Angular 4, How to put elements in one container or the other container based on condition?
body: <p><strong>Array:</strong> </p>
  
  <pre><code>this.elements = [
    {'value' : 'One', 'bool': true },
    {'value' : 'Two'}
    {'value' : 'Three'}
  ]
  </code></pre>
  
  <p><strong>Template:</strong></p>
  
  <p><code>
  &lt;ng-container *ngFor="let e of elements"&gt;
    &lt;div *ngIf="e.bool" style="border:1px solid red"&gt;{{e.value}}&lt;/div&gt;
    &lt;div *ngIf="!e.bool" style="border:1px solid blue"&gt;{{e.value}}&lt;/div&gt;
  &lt;/ng-container&gt;
  </code></p>
  
  <p><strong>This yields:</strong></p>
  
  <pre><code>&lt;div style="border:1px solid red"&gt;one&lt;/div&gt;
  &lt;div style="border:1px solid blue"&gt;two&lt;/div&gt;
  &lt;div style="border:1px solid blue"&gt;three&lt;/div&gt;
  </code></pre>
  
  <p><strong>What I want:</strong></p>
  
  <pre><code>&lt;div style="border:1px solid red"&gt;one&lt;/div&gt;
  &lt;div style="border:1px solid blue"&gt;two three&lt;/div&gt;
  </code></pre>
  
  <p><strong>Question:</strong></p>
  
  <p>What would be the correct template syntax to create the desired layout? Here is a demo I started. <a href="https://plnkr.co/edit/BwzMEQ05IJCGdLYNTLXA?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/BwzMEQ05IJCGdLYNTLXA?p=preview</a></p>