title: Angular 2 binding ngIf programmatically
body: <p>I am building a page header component which has two states:</p>
  
  <ul>
  <li>Standard: Shows detailed content</li>
  <li>Compacted: Shows minimal content</li>
  </ul>
  
  <p>The idea is that this component can be added to any 'page' component like so:</p>
  
  <p><strong>home.component.html</strong></p>
  
  <pre><code>&lt;app-page-header&gt;
  
      &lt;app-page-header-standard&gt;
          // Standard Content
      &lt;/app-page-header-standard&gt;
  
      &lt;app-page-header-compact&gt;
          // Compact Content
      &lt;/app-page-header-compact&gt;
  
  &lt;/app-page-header&gt;
  </code></pre>
  
  <p>The code I have so far:</p>
  
  <p><strong>page-header.component.html</strong></p>
  
  <pre><code>&lt;div class="wrapper"&gt;
  
      &lt;!-- The standard and compact components are transcluded here --&gt;
      &lt;ng-content&gt;&lt;/ng-content&gt;
  
      &lt;a (click)="toggleHeaderState()"&gt;Toggle me&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>page-header.component.ts</strong></p>
  
  <pre><code>import {Component, OnInit, ViewEncapsulation, Input, ContentChild} from '@angular/core';
  import {PageHeaderStandardComponent} from "./page-header-standard.component";
  import {PageHeaderCompactComponent} from "./page-header-compact.component";
  
  @Component({
      selector: 'app-page-header',
      templateUrl: './page-header.component.html',
      styleUrls: ['./page-header.component.scss'],
      encapsulation: ViewEncapsulation.None
  })
  export class PageHeaderComponent implements OnInit {
  
      @ContentChild(PageHeaderStandardComponent) headerStandard: PageHeaderStandardComponent;
      @ContentChild(PageHeaderCompactComponent) headerCompact: PageHeaderCompactComponent;
  
      /**
       * Toggle the header standard and compact state
       * @type {boolean}
       */
      @Input() compacted: boolean = false;
  
      constructor() {
      }
  
      ngOnInit() {
          console.log(this.headerStandard);
          console.log(this.headerCompact);
  
          // TODO
          // Bind compact and standard component to compacted input
          // i.e. one hides while the other shows
      }
  
      toggleHeaderState() {
          this.compacted = !this.compacted;
      }
  }
  </code></pre>
  
  <p><strong>The Question:</strong>
  How do I assign an ngIf to the two ContentChild components in the ngOnInit function? i.e. show one component when the <code>compacted</code> input is true and then show the other when the <code>compacted</code> input is false</p>