Ionic 2 : How do you reinstantiate @ViewChild if you dismiss the view?

Question

I'm creating a chat experience and the page keeps up with the conversation by using the scrollToBottom method from Content on ionic-angular. If I start at the "PreChat.html" and go to "Chat.html" then I dismiss "Chat.html" to go back to "PreChat.html" and return again to "Chat.html" I get the following error: "Cannot read property 'scrollToBottom' of null". The experience should be able to be entered into at any time or repeatedly.

PreChat.html:

<ion-content>
  <button (click)="goToChat()" href="#">
    Chat
  </button>
</ion-content>

PreChat.ts:

import { Component } from '@angular/core';
import { ModalController } from 'ionic-angular';
import { Chat } from '../chat';

@Component({
  selector: 'preChat',
  templateUrl: 'preChat.html'
})
export class PreChat  {
   constructor(private modalCtrl: ModalController){}

   goToChat(): any {
    let profileModal = this.modalCtrl.create(Chat);
    profileModal.present();
  }
}

Chat.html:

<ion-content>
  <button ion-button="filter-button"(click)="dismiss()">
    <ion-icon name="close"></ion-icon>
  </button>
  <div *ngFor="let convo of conversationArray">
    <div class="b-text">{{convo.speak}}</div>
  </div>
</ion-content>

Chat.ts:

import { Component, ViewChild } from '@angular/core';
import { Content, Events, ViewController } from 'ionic-angular';

@Component({
  templateUrl: 'Chat.html'
})

export class Chat {
  @ViewChild(Content) content: Content;
  conversationArray: any[] = [];
  constructor(private events: Events, private viewCtrl: ViewController){
    this.events.subscribe('conversation', convo => {
      this.conversationArray = convo;
      this.content.scrollToBottom();
    })
  }
  dismiss() {
   this.viewCtrl.dismiss(); 
 }
}

Is the id named 'content' provided in html? It needs to be referenced using `#content` and then you can try `this.content.nativeElement.scrollToBottom()`, as it's the native element that you are referring to. For more details check this out: http://stackoverflow.com/questions/39158922/viewchild-not-working-cannot-read-property-nativeelement-of-undefined — Deepak, Apr 20 '17 at 06:30
@Deepak, why would I need the id when content refers to specifically? http://ionicframework.com/docs/api/components/content/Content/ — rashadb, Apr 20 '17 at 06:40
After much searching, there appears to be a way to pass data between components with ViewChild that doesn't quite apply in the context of using ionic/angular Content. Having said that, my purpose was to create a chat based bottom scroll as seen in the Ionic docs. That's way to much code for nothing but bugs and inconsistency. This link provides a much clearer solution: http://plnkr.co/edit/7yz2DUttPjI5GVJkvr5h?open=app%2Fapp.component.ts&p=preview — rashadb, Apr 20 '17 at 22:29

Sampath · Accepted Answer · 2017-04-20T06:46:20.683

3

You have to use ionViewDidEnter page event instead of the constructor for that.

Runs when the page has fully entered and is now the active page. This event will fire, whether it was the first load or a cached page.

ionViewDidEnter() : void {
 this.platform.ready().then(() => { //platform ready
   this.events.subscribe('conversation', convo => {
      this.conversationArray = convo;
      this.content.scrollToBottom();
    })
 })
}

edited Apr 20 '17 at 06:46

answered Apr 20 '17 at 05:49

Sampath

63,341
64
307
441

thanks for the suggestion but it didn't work. Was there a step or detail missed in using ionViewDidEnter? I'm not familiar with this lifecycle hook specifically. Could have something to do with the Chat.ts and Chat.html being a modal? – rashadb Apr 20 '17 at 06:01
Hmm... This is the doc about life cycle hooks : https://github.com/driftyco/ionic/blob/master/src/navigation/nav-controller.ts#L238 – Sampath Apr 20 '17 at 06:07
I think this issue is with @ViewChild. It needs to get reinstantiated but that's not happening right now. Any thoughts on this nuance? – rashadb Apr 20 '17 at 06:17
What does it show when you put a debug on `content`? – Sampath Apr 20 '17 at 06:20
How do you put a debug on content? As it stands I'm getting content as null. – rashadb Apr 20 '17 at 06:30
Hmm.. Did you try inside this `this.platform.ready().then(() => {})`? – Sampath Apr 20 '17 at 06:33
Yes all of this happens after this.platform.ready() which occurs upon app load in my app.component and preChat is just a tab that gets initialized after this.platform.ready() happens. Are you saying I need to do this.platform.ready() again? – rashadb Apr 20 '17 at 06:35

score 1 · Answer 2 · edited May 03 '17 at 19:00

1

Please try the following:

this.content = this.ViewCtrl.getContent();

edited May 03 '17 at 19:00

halfpastfour.am

5,764
3
44
61

answered May 03 '17 at 16:41

Atmosuwiryo

104
3

Ionic 2 : How do you reinstantiate @ViewChild if you dismiss the view?

2 Answers2