Unable to detect scroll in ion-router-outlet

Question

My requirement is i wants to hide header when user does scrolling inside page. so what i thought is ill add my header in app.component.html and ill detect the scrolling and ill hide it but i am unable to.

Code: app.component.html

<ion-app>
  <ion-header>
    <app-header></app-header>
  </ion-header>
  <ion-content [scrollEvents]="true" (ionScroll)="scrolling($event)">
    <ion-router-outlet></ion-router-outlet>
  </ion-content>
</ion-app>

app.component.ts

export class AppComponent {

    @ViewChild(IonContent) content: IonContent;
    
     constructor(){}
    
    @HostListener('window:scroll', ['$event'])
    async scrolling(event: any) {
        console.log("-----scrolling detected--------");
        //Do code
      }
    
    }

can someone help with me where i am making mistake ?

Thank you in advance !

Answer 1

Managed to fix this by detecting ionScroll insted of window scroll,

@HostListener('ionScroll', ['$event'])
  scrolling($event: any) {
    const getScrollVal = $event;
    let scrollElement = getScrollVal.detail;
 }

Might help someone :)