title: Angular viewchild undefined in ngAfterViewInit
body: <p>I have 2 components, ComponentA &amp; ComponentB, comp b is a child to comp a. ComponentB basically takes input from ComponentA &amp; generates view. This input is obtained from a rest call. So I have wrapped my component b selector in an *ngIf. In this selector I also have a viewchild attached to it.</p>
  <p>So basically, what I am assuming is that when ComponentB is completely rendered, I want to execute some code using my viewchild reference. This code is written in ngAfterViewInit() inside ComponentA. But when I try to access this.viewChildReference, it says undefined.</p>
  <p>ComponentA.html</p>
  <pre><code>&lt;div *ngIf=&quot;dataAvailable&quot;&gt;
      &lt;componentb #viewChildReference [data]=&quot;dataFromComponentA&quot;&gt;&lt;/componentb&gt;
  &lt;/div&gt;
  </code></pre>
  <p>ComponentA.ts</p>
  <pre><code>// skipping boiler code for brevity
  
  class {
      dataAvailable = false;
      @ViewChild('viewChildReference') viewChildReference: ChildComponentModule;
  
      ngOnInit() {
          // fetch data from rest
          dataAvailable = true;
      }
  
      ngAfterViewInit() {
          this.viewChildReference.somemethod();
      }
  }
  </code></pre>
  <p>ComponentB.html</p>
  <pre><code>// Use data from parent component and generate view
  </code></pre>
  <p>How can I solve this? What is wrong with my current approach? Please help as I am stuck up at this point..</p>
  <h2>UPDATE:</h2>
  <p>This question is not duplicate, as I have tried other solutions as suggested in comments in this question, like emitting events &amp; other answers. Still I am facing issues, kindly unmark this as duplicate.</p>