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
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();