Renderer is deprecated as a favor for renderer2, alternative for `invokeElementMethod`?

Question

For a side project of mine, I want to implement a chat stream where new message is added to the bottom and the windows should scroll to the bottom to display the latest message.

In order to do that, I have opted to use ViewChildren on the component to find the last message(latest) and use scrollIntoView on the nativeElement .

In order not to call the method by accessing the DOM API directly nativeElement.scrollIntoView() . I believe I will need to use renderer.invokeElementMethod(nativeElement, 'scrollIntoView') .

Problem is renderer is deprecated in favor of renderer2 and I cant seem to find alternative for the method invokeElementMethod in renderer2 .

Question is, is there a method that I missed in renderer2 that do just that? or we have a new way doing invoking element method now?

Answer 1

You can use selectRootElement method of Renderer2 .

For example:

constructor(private renderer: Renderer2) {}

this.renderer.selectRootElement('#domElementId').scrollIntoView()

, where domElementId is id='domElementId' in your html

---

UPDATE

Supply a Second Argument for selectRootElement as per Angular's Official Documentation as it is used to preserve your content

selectRootElement(selectorOrNode: any, preserveContent?: boolean): any

this.renderer
  .selectRootElement'#domElementId', true)  // Supply true for the 2nd arg to make sure your content is preserved.
  .scrollIntoView()                      // Or ({ behavior: 'smooth' }) for smooth scrolling

Answer 2

Let's answer this by an exapmple:

In case we have a view like this:

<input #inp1 type="text" placeholder="focus on me" />

Inside ngAfterViewInit() , it needs to be given focused like this:

this.renderer.selectRootElement("inp1").scrollIntoView();