Hello!
I have a chat page in my app where the chat-div is inside a wrapper-div. The structure looks like this:
<ion-content>
<div class="wrapper>
<div class="chatwindow">
<ion-grid>
<ion-row *ngFor="let message of messages">
<ion-col *ngIf="message.fromId !== myUid>
<div class="message other-message>
<span>{{message.text}}</span>
</div>
</ion-col>
<ion-col *ngIf="message.fromId === myUid>
<div class="message my-message>
<span>{{message.text}}</span>
</div>
</ion-col>
</ion-row>
</ion-grid>
</div>
</div
</ion-content>
My problem is that I am not able to make the chatpage scroll to bottom (both at pageload and when new messages arrives).
What I have tried so far:
TS: file
@ViewChild(‘content’) content: Content;
ngOninit(){
setTimeout(()=>{this.content.scrollToBottom();},200);
}
HTML file:
<ion-content #content>
Above does not give any effect, i also tried using ngZone and [scrollEvents=“true”].
The only thing that has given some effect is [ScrollTop]=“content.scrollheight”. But then the whole chatpage reloades everytime a message arrives and it scroll up and down very fast.
Any help with this will be much appreciated.
Thank you in advance.