@ViewChild(Content) - content is undefined and I can't scroll to bottom


I’ve just detected that sometimes when I add rows to my list and try to scroll to bottom using:

//@ViewChild(Content) content: Content;

my content var is undefined sometimes, so I can’t scroll down.

Any help, please?

Thank you.

1 Like

@Corin I don’t know when you are calling the content method in your code, but did you put that call inside ngOnInit, ngOnChanges or something like that? Maybe the view was not initiated yet. Try to use only after the view was loaded (after ngAfterViewInit was called).

Thank you for your help Lucas, but no I am calling it just when I enter some message in my chat. :S

Maybe I need to give enough time to the list grow?

@Corin Content should be defined. Are you using @ViewChild(Content) in the same component that has the ion-content tag in the html template? (that is, it’s not a super-component nor a sub-component)

Yes, in the same component and the problem is android only. :frowning:

1 Like

I also had the same problem, but it worked out after ionViewDidEnter .

import {ViewChild } from '@angular/core';
import { Content } from 'ionic-angular';


export class SamplePage {
  @ViewChild(Content) content: Content;

  constructor( ) {
    console.log(this.content); // => undefined

  ionViewDidEnter() {
    console.log(this.content); // => Content {_config: Config, …}
    this.content.scrollToBottom(); // => worked correctly

As I understand it, this timing issue is related to the static property of @ViewChild, which didn’t exist when this thread was created, but is important now and will be mandatory going forward.