Cannot read property scrollToBottom of null after revisiting a page

Question

Your system information:

Cordova CLI: 6.4.0

Ionic Framework Version: 2.0.0-rc.4

Ionic CLI Version: 2.1.14

Ionic App Lib Version: 2.1.7

Ionic App Scripts Version: 0.0.47

ios-deploy version: Not installed

ios-sim version: Not installed

OS: Windows 7

Node Version: v6.9.2

Xcode version: Not installed

Im getting this error after Im pushing to a Conversation-View. With socketIO im connecting to my messageserver which is pushing new messages to the client. After this I want to automatically scroll down, so the newest message will be displayed.

If i open the conv.-window for the first time im good with it and all is working fine, but on the second time (pressing back and renavigating to the page) i got this error.

Thank you :)

EDIT: Error-Message:

Cannot read property scrollToBottom of null

connect() {
  this.socket.on("connect", () => {
      console.log("connected");  
      console.log("Listening on: "+"message_"+this.secretid);
      this.socket.emit('message', { type: "token", token: this.secretid });
      this.socket.on("message_"+this.secretid, (msg) => {
          let msg_data = JSON.parse(msg);
          msg_data.payload.writer_id = msg_data.payload.user;
          console.log(msg_data);
          this.chat.push(msg_data.payload);
          this.content.scrollToBottom(); <<--Error
      });
  });
}

Connect is called in ionViewDidLoad() {} so this.content should be initialized.

Im using ionic 2

EDIT 2: Only getting this error in Ionic Lab

Answer 1

ionviewdidload lifecycle hook is called for page initialisation and is called once. Docs here

The view may not be loaded yet.

From the given code,the solution I see is either put the scrollTobottom call in ionviewWillEnter

or try Angular's hook ngOnChanges Here where you can check for change in chat list.

Answer 2

You need to put your this.content.scrollToBottom(0); under if condition. Like this :

if( this.content._scroll ) {

this.content.scrollToBottom(0);

}

Please try it once.

Answer 3

Try this:

<ion-content #content>
</ion-content>