How to focus kendo-combobox in ngOnInit

Question

Basically I want to achieve this: when user navigates to the page that contains kendo-combobox I need to focus it.

It would be great if I could get instance of that component into a variable, so I could manipulate with it in other parts of code.

Answer 1

After some time I found a very easy solution using DOM manipulation. First I gave my kendo-combobox an ID and later inside ngInit I did this:

var inputs = document.getElementById('erpDropDown').getElementsByTagName('input');
// in my case I need my input to be empty and ready to receive scanned value from physical scanner
$("#" + inputs[0].id).val("");   
document.getElementById(inputs[0].id).focus(); // this line sets focus to HTML input element

Answer 2

Angular components have more lifecycle hooks. According to the docs the order in which they're called is:

• ngOnChanges()
• ngOnInit()
• ngDoCheck()
• ngAfterContentInit()
• ngAfterContentChecked()
• ngAfterViewInit()
• ngAfterViewChecked()
• ngOnDestroy()

Now, to simplify this, angular calls the component constructor only the first time it imports the component in the module you're using, after that it calls ngOnInit() and ngOnDestroy() to mount and unmount it, so when angular calls the ngOnInit() lifecycle hook the component doesn't have the html part(the component it's not rendered yet), if you want to manipulate the template part(by using template variables) you have to move your logic inside the ngAfterViewInit() hook that will be called once the mounting process has finished to render the component.

This is the standard process, since kendo-combobox is an external component you have to wait for the compoenent to render so the process in step is:

1. angular calls the ngOnInit() on your component to start mounting it
2. after the component has been mounted angular calls the ngAfterViewInit(), again, on your component
3. Now the view is initialized and angular calls the kendo component's ngOnInit()
4. after the kendo component has finished rendering angular calls its ngAfterViewInit()

To make examples, if you just wanted to focus a native input you could have done something like:

test.component.html:

<input #myInput type="text" />

test.component.ts:

class TestComponent implements AfterViewInit {
    @ViewChild('myInput') myInput: ElementRef<HTMLInputElement>;

    public ngAfterViewInit(): void {
        // your logic works fine here
    }
}

But since your using an external component you can use:

test.component.html

<custom-component #myComponent></custom-component>

test.component.ts

class TestComponent implements OnInit {
    @ViewChildren('myComponent') myComponent: QueryList<MyComponent>;

    public ngOnInit(): void {
        this.myComponent.changes.subscribe(component => {
            // here you can:
            // check if the component is mounted
            // implement your logic
        })
    }
}

In the second example you can use the ngOnInit because you're not acessing the component in the template directly, insted you're using the ViewChildren directive to subscribe to the component's changes(async approach)