How to get HTML element using renderer2 service in angular?

I am trying to get an HTML textbox element using the Renderer2 service of @angular/core to manipulate it.

Although my code is not giving any error, it stops executing during execution on the line in which I am trying to get that element:

this.renderer.selectRootElement('#0', true).focus();


It is also setting the ID of that text element to 0, which I am doing in initial lines.

Code:

private focusOnTextbox(){
const inputElements = this.el.nativeElement.querySelectorAll('input');

// Set ID for each input element
inputElements.forEach((element: HTMLElement, index: number) => {
const id = index.toString();
this.renderer.setAttribute(element, 'id', id);
});
// Focus the input with id '0'
this.renderer.selectRootElement('#0', true).focus();
}

Continue reading...