Scroll To bottom does not work with Observable?

Hi,

I’m building a chat app with Ionic angular firebase and when I send a new message i call the scrollToBottom() function. The problem is that the chat window goes to top (very quick less than 1sec) before going to bottom. So it feels like the application is bugged because when I send a message it goes straight top very quick and then after goes to bottom.

Here is my code:

tchat.service.ts:

getChatMessages() {
return this.afs
  .collection("messages", (ref) => ref.orderBy("createdAt", "asc"))
  .valueChanges({ idField: "id" }) as Observable<Message[]>;}

tchat.ts:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Tchat</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item *ngFor="let message of messages | async">
      <ion-avatar slot="start">
        <img src="{{message.img_url}}">
      </ion-avatar>
      <ion-label>
        <h2>{{ message.from_name }} {{ message.createdAt?.toMillis() | date:'short' }}</h2>
        <p>{{ message.msg }}</p>
      </ion-label>
    </ion-item>
  </ion-list>
</ion-content>
<ion-toolbar color="light">
  <ion-row class="ion-align-items-center">
    <ion-col size="10">
      <ion-textarea autoGrow="true" class="message-input" rows="1" maxLength="500" [(ngModel)]="newMsg"
        (keydown)="handleSubmit($event)">
      </ion-textarea>
    </ion-col>
    <ion-col size="2">
      <ion-button expand="block" fill="clear" color="primary" [disabled]="newMsg === ''" class="msg-btn"
        (click)="sendMessage()">
        <ion-icon name="send" slot="icon-only"></ion-icon>
      </ion-button>
    </ion-col>
  </ion-row>
</ion-toolbar>

tchat.ts:

export class TchatPage implements OnInit, AfterViewChecked {
  @ViewChild(IonContent) content: IonContent;

  messages: Observable<any[]>;
  newMsg = "";

  constructor(private tchatService: TchatService) {}

  ngOnInit() {
    this.messages = this.tchatService.getChatMessages();
  }

  ngAfterViewChecked() {
    this.content.scrollToBottom(200);
  }

  sendMessage() {
    this.tchatService.addChatMessage(this.newMsg).then(() => {
      this.newMsg = "";
      this.content.scrollToBottom(200);
    });
  }

  handleSubmit(event) {
    if (event.keyCode === 13) {
      this.sendMessage();
    }
  }
}

1 post - 1 participant

Read full topic