[IONIC 4] Scroll to bottom on chat page

@AdamGelineau wrote:

Hi there !

I’m creating an app which contains a chat functionality and I’m trying to implement the scrollToBottom() function when I reach my chat page and my messages are loaded.
Here’s what I’ve done so far:

<ion-content [scrollEvents]="true">
  <div class="messages-container" *ngIf="connectedUser">
    <ol class="messages">
      <li *ngFor="let msg of messages" [class.mine]="connectedUser.id === msg.userFrom.id">
        <span class="msg-content">{{msg.content}}</span>
      </li>
    </ol>
  </div>
</ion-content>

import {IonContent} from '@ionic/angular';
import {Component, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {RestApiService} from '../services/rest-api.service';
import {AlertService} from '../services/alert.service';

export class ChatPage implements OnInit {
    @ViewChild(IonContent) content: IonContent;
    connectedUser = null;
    messages = [];
    contactId = null;

    constructor(private activatedRoute: ActivatedRoute, private api: RestApiService, private alert: AlertService) {
        this.contactId = this.activatedRoute.snapshot.paramMap.get('contactId');
    }

    ngOnInit() {
        this.getMessages();
    }

    getMessages() {
        this.api.get('conversation/getMessages/' + this.contactId).subscribe(res => {
            this.messages = res;
            setTimeout(() => {
                this.updateScroll();
            }, 500);
        }, err => {
            this.alert.present();
        });
    }

    updateScroll() {
        if (this.content.scrollToBottom) {
          this.content.scrollToBottom(400);
        }
    }
}

Unfortunately, it doesn’t scroll at all. I can log things in my updateScroll() function, so I reach this code, but it still doesn’t scroll.

Any ideas ?
Thanks.

Posts: 2

Participants: 2

Read full topic