scrollToBottom is not a function in ionic 4

Question

I explored a lot before posting here and did not find a solution. but I am missing something small.

Below is my html

<ion-header>
  <ion-toolbar>
    <ion-title>chat</ion-title>
  </ion-toolbar>
</ion-header>

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

  <ion-list>
    <ion-item *ngFor="let item of dummyList">
      <ion-label>{{ item.value }}</ion-label>
    </ion-item>
  </ion-list>

</ion-content>
<ion-footer class="footersize">

  <ion-item>
    <ion-textarea  class="rounded" id="inputID" type="text" placeholder="Message" name="message"></ion-textarea>

    <ion-button slot="end" (click)="sendMesg()">
      <ion-icon slot="icon-only" name="send"></ion-icon>
    </ion-button>
  </ion-item>


</ion-footer>

TS file:

import { Component, OnInit, ViewChild, ElementRef , ViewChildren} from '@angular/core';
import { IonContent } from '@ionic/angular';
@Component({
  selector: 'app-chat',
  templateUrl: './chat.page.html',
  styleUrls: ['./chat.page.scss'],
})
export class ChatPage implements OnInit {

  //@ViewChild(IonContent,{read : ElementRef,static : false}) content: IonContent;
  @ViewChildren(IonContent) content: IonContent;
  //@ViewChildren('scrollElement',{read : ElementRef}) content: IonContent;

  dummyList:any;

  constructor() { 
    this.dummyList = [
      {
        value:"Esteban Gutmann IV",
      },{
        value:"Bernardo Prosacco Jr.",
      },{
        value:"Nicholaus Kulas PhD",
      },{
        value:"Jennie Feeney",
      }];
  }
  ngOnInit() {
    setTimeout(()=>{
      this.scrollDown();
    },1000)
  }
  logScrollStart(){
    console.log("logScrollStart : When Scroll Starts");
  }
  logScrolling(){
    console.log("logScrolling : When Scrolling");
  }
  logScrollEnd(){
    console.log("logScrollEnd : When Scroll Ends");
  }
  scrollDown(){
    this.content.scrollToBottom(1500);
  }
  sendMesg(){
    const data = {
      value:"Esteban Gutmann IV",
    };
    this.dummyList.push(data);
    setTimeout(()=>{
      this.scrollDown();
    },1000)
    //this.ScrollToBottom();
  }
}

ionic info

Ionic:

   Ionic CLI                     : 5.4.4 (C:\Users\krishna prasad\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.11.3
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v11.0.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.1.0
   OS     : Windows 10

The scrollToBottom method comes in the suggestion list of VS code but ending up as not a function error while running.

core.js:9110 ERROR TypeError: this.content.scrollToBottom is not a function at ChatPage.scrollDown (chat.page.ts:50) at chat.page.ts:32 at ZoneDelegate.invokeTask (zone-evergreen.js:391) at Object.onInvokeTask (core.js:34182) at ZoneDelegate.invokeTask (zone-evergreen.js:390) at Zone.runTask (zone-evergreen.js:168) at invokeTask (zone-evergreen.js:465) at ZoneTask.invoke (zone-evergreen.js:454) at timer (zone-evergreen.js:2650) defaultErrorLogger @ core.js:9110 client:172 [WDS] Disconnected!

I am testing this with ionic serve. I am missing something small but could not catch. Please give some pointers. I tried with viewchild and viewchildren attributes as you can notice in the comments.

Answer 1

I got the solution from Sampath's answer in this link

As on 21-Dec-2019, This works @ViewChild('content', { static: false }) content: IonContent;