SrollToTop method doesn't work with a component in Ionic 6/Angular-CodePudding

I have made a fabbutton so the user can scroll to top in one click. I have test this without a component and this was working fine. Now I want to use this fabbutton as a component, because I want to use this in multiple pages.

This my component setup:

fabbutton.component.html

<div >
  <ion-fab vertical="bottom" horizontal="end" edge slot="fixed">
    <ion-fab-button  size="small" (click)="scrollToTop()">
      <ion-icon name="arrow-up"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</div>

I use a custom css class to make it stick when the user scrolls

fabbutton.component.scss

.fixed {
    position: fixed;
    bottom: 30px;
    right: 0;
}

Why ion-fab-button doesn't stay fixed inside ionic 4 popover?

This is working fine.

Now I have method to scroll to top in the ts file.

fabbutton.component.ts

export class FabbuttonComponent {

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

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

}

I use the selector like this in my homepage.

Home.html

    <ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-menu-button></ion-menu-button>
        </ion-buttons>
        <ion-title>Home</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content color="secondary" [scrollEvents]="true">
    <app-fabbutton></app-fabbutton>
  </ion-content>

I also inject the component in the home.module file.

When I test the app I get the following error:

core.mjs:6494 ERROR TypeError: Cannot read properties of undefined (reading 'scrollToTop') at FabbuttonComponent.scrollToTop (fabbutton.component.ts:14:18) at FabbuttonComponent_Template_ion_fab_button_click_2_listener (template.html:3:56) at executeListenerWithErrorHandling (core.mjs:15031:1) at wrapListenerIn_markDirtyAndPreventDefault (core.mjs:15069:1) at HostElement. (platform-browser.mjs:466:38) at _ZoneDelegate.push.3484._ZoneDelegate.invokeTask (zone.js:443:1) at Object.onInvokeTask (core.mjs:25595:1) at _ZoneDelegate.push.3484._ZoneDelegate.invokeTask (zone.js:442:1) at Zone.push.3484.Zone.runTask (zone.js:214:1) at ZoneTask.push.3484.ZoneTask.invokeTask [as invoke] (zone.js:525:1)

I have tried to use the method as a parent and child method but it doesn't work. How can I use the component method into the injected page? Can someone point me in the right direction?

Jsfiddle: https://jsfiddle.net/920cagns/

CodePudding user response：

You can't access ion content (parent in this case) from fabbutton (child element). You have to add an EventEmitter to fabbutton and do the scroll from home.ts

fabbutton.component.ts

...
export class FabbuttonComponent {

  @Output('onClick') onClick = new EventEmitter();

  scrollToTop() {
    this.onClick.emit() ;
  }

}

Home.html

...
<app-fabbutton (onClick)="scrollToTop()"></app-fabbutton>
...

Home.ts

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

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

CodePudding user response：

I have added the scrollToTop() method on the fabbutton.component.html like this:

<div >
  <ion-fab (click)="scrollToTop()" vertical="bottom" horizontal="end" edge slot="fixed">
    <ion-fab-button  size="small">
      <ion-icon name="arrow-up"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</div>

After testing this it works like a charm!