So here is what i did regarding the content automatically scrolls down to bottom when you scroll up.
If you log your scrollToBottom function, you could see that the scrollToBottom function exectues several times on page load and even if you stay idle, it will continue to execute, i suspect it has something to do with two-way binding.
This helped me accomplish what I wanted. However, I have a PopoverController in the header of my chat. On pressing it, it will cause the whole view to re-render and thus call the method to scroll to the bottom of the panel.
I wish to avoid this since if the user has scrolled up a lot searching for something and he decides to use the popover controller, he will have to do all the scrolling again which is annoying and doesnāt make sense.
Any help to deal with this situation would be appreciated!
Thereās a problem with the proposed solution, its true the function is called multiple times and this might have to do indeed with the two way binding. I suppose this could be reduce by the use of trackBy on *ngFor
Despite this as stated on a previous response it could be avoided to continuously scrolling down by defining a flag that will be set to true after the content has been scrolled down, despite this I donāt think is a good solution since the function will be called continuously checking for the scrolled flag over and over, not nice.
What I did instead (and itās not ideal) is to wrap all my content onto a container and set it to visibility hidden, so it will occupy the space on the content and after fetching the data and scrolling down making it visible. Like this is ok, the only problem is that for a small fraction of time you see the scroll bar at the side bar as if you see it when you scroll up or down