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?
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