I want to open page scroll down form the bottom, I am developing a chat app in ionic 3, when I have open the page it open from the top. But I want to open the page scrolled at the bottom first.
I am currently using this code
My HTML code:
<ion-content padding> <ion-row> <div id="chatMessages"> <div *ngFor="let message of messages;"> <div [class]="message.username == username ? 'innerMessage message1' : 'innerMessage message2'"> <div class="username">{{ message.username}}</div> <div class="messageContent">{{ message.message }}</div> </div> </div> </div> </ion-row> </ion-content>
My TS Code:
export class ChatPage { user_id: string = ''; constructor(public navCtrl: NavController, public navParams: NavParams,private storage:Storage,public db: AngularFireDatabase,public sysprvd:SystemProvider) { this.storage.get('user_id').then((user_id_data) => { if(user_id_data != null){ let loader = this.sysprvd.showLoader(); loader.present().then(() => { this._chatSubscription = this.db.list("/chat").valueChanges().subscribe( data => { this.messages = data; }); loader.dismiss(); }); } }); } }
Help me, please. Thanks.
You have to import “Content” and “ViewChild”
Apply it in your HTML
<div *ngFor="let message of messages; let last = last">
and call a function
{{last ? callFunction() : ''}}
For example:
Apply HTML:
<ion-content padding> <ion-row> <div id="chatMessages"> <div *ngFor="let message of messages; let last = last"> <div [class]="message.username == username ? 'innerMessage message1' : 'innerMessage message2'"> <div class="username">{{ message.username}}</div> <div class="messageContent">{{ message.message }}</div> </div> {{last ? callFunction() : ''}} </div> </div> </ion-row> </ion-content>
Apply JS:
import { Component, ViewChild } from '@angular/core'; import { IonicPage, NavController, NavParams, Content } from 'ionic-angular'; export class ChatPage { @ViewChild(Content) chatlist : Content user_id: string = ''; constructor(public navCtrl: NavController, public navParams: NavParams,private storage:Storage,public db: AngularFireDatabase,public sysprvd:SystemProvider) { this.storage.get('user_id').then((user_id_data) => { if(user_id_data != null){ let loader = this.sysprvd.showLoader(); loader.present().then(() => { this._chatSubscription = this.db.list("/chat").valueChanges().subscribe( data => { this.messages = data; }); loader.dismiss(); }); } }); } callFunction(){ this.chatlist.scrollToBottom(0) } }
Hope it will helpful for you.
Question and answer is powered by AnsPress.io