title: Angular6 - reference hidden element
body: <p>I have a scenario where I am using a component that's embedded in my html template and I want it to be hidden until a box is checked.  HOWEVER, there's a condition which determines if the "showControl" is to be set to true or not...
  The condition is determined by calling a method on the control (chicken and egg scenario here).</p>
  
  <p>The html is as follows:</p>
  
  <pre><code>&lt;input type="checkbox" (click)="clickBox()" /&gt;
  
  &lt;div *ngIf="showControl"&gt;
      &lt;app-sample #appsampleref&gt;&lt;/app-sample&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the .ts code is as follows:</p>
  
  <pre><code>@ViewChild(appsampleref) appSampleControl: AppSampleComponent;
  
  clickBox() {
     if (this.appSampleControl.someMethod()) { 
         this.showControl = true;
     }
  }
  </code></pre>
  
  <p>The code above gives me the following error:</p>
  
  <blockquote>
    <p>ERROR TypeError: Unable to get property 'someMethod' of undefined or
    null reference</p>
  </blockquote>
  
  <p>How do I get around this scenario as Angular obviously isn't initialising my control until it is shown.</p>
  
  <p>Thanks in advance for any pointers! :)</p>