Angular2 - How to access a child input element which is yet to be rendered?

Question

For example, my template looks like -

<div #parent>
    <button (click)="showInput()"> Show </button>
    <input #inp *ngIf="showInpField" />
</div>

And this is how my compoent looks like:

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();
    }   
}

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.

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!

Answer 1

This could work

@Component({
  selector: 'my-app',
  template: `
    <div>
      <button (click)="toggleInput()"> {{ showInpField ? 'Hide' : 'Show'}} </button>
      <input #inp *ngIf="showInpField" />
  </div>
  `
})
export class AppComponent { 
  @ViewChildren('inp', { read: ElementRef }) elemRefs: QueryList<ElementRef>;

  showInpField = false;

  constructor(private renderer: Renderer){}

  toggleInput(){
    this.showInpField = !this.showInpField;
  }  

  ngAfterViewInit() {
    this.elemRefs.changes.subscribe(item => {
      if(!this.elemRefs.length) return;

      this.renderer.invokeElementMethod(this.elemRefs.first.nativeElement, 'focus');
    })
  } 
}

Plunker Example

Answer 2

Official way would be to use the Renderer!

https://angular.io/docs/ts/latest/api/core/index/Renderer-class.html

import {Component, NgModule, Renderer, ViewChild} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2 (click)="toggleInput()">Hello {{name}}</h2>
      <input value="any other input.." />
      <br />
      <input #inpt *ngIf="showInput" />
    </div>
  `,
})
export class App {
  @ViewChild('inpt') input;
  name:string;
  showInput = false;

  constructor(private _renderer: Renderer) {
    this.name = 'Angular2'
  }

  private toggleInput() {
    this.showInput = !this.showInput;

    if (this.showInput) {
      setTimeout(() => {
        this._renderer.invokeElementMethod(this.input.nativeElement, 'focus');
      }, 1);
    }
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

live demo: https://plnkr.co/edit/DWaEvqjFARRsKg1Byeu7?p=preview