Odtnhj

I have a parent Component, that after some actions will call a child component after an ngIf returns true, and this child component has an Input element that I want to focus. Because the child component is not instantiated when the parent is, using ViewChild doesn't seem to be working for me. I am getting close to a good strategy to focus this input with a service, but actually managing to get a reference to this input when needed I am finding to be difficult.

You can try setting the autofocus attribute of the input.

<input ... autofocus="true">

If that doesn't work, then you can create a directive that will force the input to receive focus after the DOM element is created. Here is a directive that I've been using and it has the option to delay the setting of the focus by JS digests which is handy for some difficult component arrangements.

@Directive(
 selector: '[ui-focus]'
)
export class FocusDirective implements AfterViewInit number = 0;

 /**
 * Conditionally control if focus should be set.
 */
 @Input()
 public focusEnabled: boolean = true;

 private counter: number;

 public constructor(private el: ElementRef) 
 

 public ngAfterViewInit(): void 
 if (Boolean(this.focusEnabled)) 
 this.counter = this.focusDelay === true ? 1 : parseInt(this.focusDelay + '', 10);
 this.setFocus();
 
 

 private setFocus() 
 if (this.counter <= 0) 
 (<HTMLElement>this.el.nativeElement).focus();
 else 
 this.counter--;
 window.setTimeout(() => this.setFocus());
 
 

You can then assign the directive to the input control.

<input ... ui-focus>

You shouldn't have to do anything more complicated than this (i.e. no need for a service).