Cfrgtkky

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 {

    /**

     * The number of JavaScript digestions to complete before setting focus.

     */

    @Input()

    public focusDelay: string | boolean | 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).