title: How to subscribe to a Subject on a conditional ViewChild?
body: <p>How do you bind to an <code>EventEmiter</code> or <code>Subject</code> in a child component when that component is contained within an <code>*ngIf</code> ?</p>
  <p>I've got a component as a <code>@ViewChild()</code> inside an <code>*ngIf</code></p>
  <pre><code>@ViewChild('foo')
  foo: FooComponent;
  </code></pre>
  <pre><code>&lt;div *ngIf=&quot;someToggle&quot;&gt;
     &lt;app-foo #foo/&gt;
  &lt;/div&gt;
  </code></pre>
  <p>My <code>FooComponent</code> has a <code>Subject</code> to notify the parent component when something changes:</p>
  <pre><code>export class FooComponent
  {
      @Output()
      somethingChanged = new Subject();
  }
  
  </code></pre>
  <p>Now, in my parent component, when I try to subscribe to the <code>somethingChanged</code> subject I get an error because <code>this.foo</code> is undefined. In the example below there are two places I could subscribe, in the <code>ngAfterViewInit</code> which would be the place to do it if the child component wasn't in an <code>*ngIf</code>, but it is so it's undefined at this point.</p>
  <p>The second place to subscribe is in my <code>showTheFoo()</code> method which flips the switch to show the component, but the viewChild is still undefined immediately after that because angular hasn't processed the change yet, so how do I subscribe after the change has been processed and the component is added to the DOM?</p>
  <pre><code>export class ParentComponent implements AfterViewInit
  {
      @ViewChild('foo')
      foo: FooComponent;
  
      someToggle = false;
  
  
      ngAfterViewInit(): void {
          // this.foo === undefined.
          // this makes sense because it's hidden
      }
  
      showTheFoo()
      {
          this.someToggle = true;
          
          // this.foo is still undefined.
          // this also makes sense, because although we've flipped the switch
          // angular hasn't processed the change, 
          // but how do I subscribe after it's been shown?
          this.foo.somethingChanged.subscribe(()=&gt;{});
  
      }
  }
  
  </code></pre>