Angular2 - How to access a child input element which is yet to be rendered?
<p>For example, my template looks like - </p>

<pre><code>&lt;div #parent&gt;
    &lt;button (click)="showInput()"&gt; Show &lt;/button&gt;
    &lt;input #inp *ngIf="showInpField" /&gt;
&lt;/div&gt;
</code></pre>

<p>And this is how my compoent looks like: </p>

<pre><code>import { Component, OnInit, ViewChild } from '@angular/core';
@Component({
  selector: 'some-component',
  templateUrl: './template.html',
})
export class SomeComponent {
    @ViewChild('inp') inpField: any;
    showInpField = false;
    constructor() {}
    showInput(){
        this.showInpField = true;
        // This doesn't work
        this.qaTitle.inpField.focus();
    }   
}
</code></pre>

<p>In this case the focus doesn't work because the input element is still yet to be render. I realize that using timeout on that line will work, but somehow I don't feel like it's a good way to do it.</p>

<p>I guess somehow I have detect the change inside the parent div, and on that event I should do the focus operation. How would I do that? I feel like QueryList can be helpful but I can't figure out how do I use it in this case!</p>