title: How to conditionally wrap a div around ng-content
body: <p>depending on the value of a (boolean) class variable I would like my <code>ng-content</code> to either be wrapped in a div or to not be wrapped in div (I.e. the div should not even be in the DOM) ... Whats the best way to go about this ? I have a <a href="http://plnkr.co/edit/omqLK0mKUIzqkkR3lQh8" rel="noreferrer">Plunker</a> that tries to do this, in what I assumed was the most obvious way, using ngIf .. but it's not working... It displays content only for one of the boolean values but not the other</p>
  
  <p>kindly assist 
  Thank you!</p>
  
  <p><a href="http://plnkr.co/edit/omqLK0mKUIzqkkR3lQh8" rel="noreferrer">http://plnkr.co/edit/omqLK0mKUIzqkkR3lQh8</a></p>
  
  <pre class="lang-js prettyprint-override"><code>@Component({
    selector: 'my-component',
    template: `
  
     &lt;div *ngIf="insideRedDiv" style="display: inline; border: 1px red solid"&gt;
        &lt;ng-content *ngIf="insideRedDiv"  &gt;&lt;/ng-content&gt; 
     &lt;/div&gt;
  
     &lt;ng-content *ngIf="!insideRedDiv"&gt;&lt;/ng-content&gt;     
  
    `,
  })
  export class MyComponent {
    insideRedDiv: boolean = true;
  }
  
  
  @Component({
    template: `
      &lt;my-component&gt; ... "Here is the Content"  ... &lt;/my-component&gt;
    `
  })
  export class App {}
  </code></pre>