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

Ionic Framework ionic-v3
1

Hi,

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

//@ViewChild(Content) content: Content;
...
this.content.scrollToBottom();

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

Any help, please?

Thank you.

1 Like
2

@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).

3

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?

4

@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)

5

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

1 Like
6

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
  }
}
7

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.

8

Hi!

I am experiencing the same in Ionic 6, but I’m wondering if the only solution to implement something like scrollToTop() is to create one dummy function ionViewDidEnter() which is scrolling to top (just to initialize such content variable) or if we have one more solution.

9

@flavio_b
Yes, it is the best way to implement that function to solve the solution.
Although it is not the best practice (in my opinion), you may also write asynchronous functions in the background and trigger it before landing on the page.

I hope it helps you :smile:

10

Hi! Thank you for replying.
Unfortunately this didn’t solve for me totally.
Such function ionViewDidEnter() makes the content variable no longer undefined now:

import { Component, ViewChild } from '@angular/core';
import {
  NavController,
  NavParams,
  LoadingController,
  IonContent,
  AlertController,
  ScrollBaseDetail,
} from '@ionic/angular';

@Component({
  selector: 'app-page-lista-atleti',
  templateUrl: 'lista-atleti.html',
})
export class ListaAtletiPage {
  constructor() { }


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

  @ViewChild('myComponent', { static: false }) content: IonContent;

}

And it also prints out: “core.mjs:6495 ERROR TypeError: this.content.scrollToTop is not a function”

11

@flavio_b
It might solve the problem by updating the version (check this discussion).

Also, the way I recommended for ionic3 might be deprecated in ionic 6. Therefore, you should use the coding rules in the new document. I will share the link which might help you.

12

Thanks!!
I’ve been in that documentation page for at least 3/4 days so far.
For what I see, it suggests to add the following to the ion-content and nothing more:

<ion-content
  [scrollEvents]="true"
  (ionScrollStart)="logScrollStart()"
  (ionScroll)="logScrolling($event)"
  (ionScrollEnd)="logScrollEnd()">

</ion-content>

And this is working to me, if I add all those three methods to my .ts file.
But the documentation doesn’t say anything about handling the button event and triggering the scrollToTop() function that should be something like this:

scrollToTop() {
    this.content.scrollToTop(1500);
  }

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

  @ViewChildren(IonContent) content: IonContent;

The thing is that such scrollToTop() function is not a function for the framework! Why? Now that the this.content is not undefined, I should be able to call that function.

Also, for what I see here, I should be able to call scrollToTop() but it is not true.

I’m on Ionic/Angular 6.0.2.

13

Hello!

I think I’ve found out why it was not working so far.
I have solved adding FormsModule and IonicModule to the imports section of the module.ts page module class:

@NgModule({
  declarations: [MyPage],
  imports: [
    MyPageRoutingModule,
    PipesModule,
    DirectivesModule,
    CommonModule,
    FormsModule,
    IonicModule,
  ],
})

Hope this helps someone else having the same problem.