Pass event object to directive

Question

I would like to pass the event object to a function in a directive

I have this in question.page.html

<ion-content appHideHeader [header]="header" [scrollEvents]="true">

and I have this in hide-header.directive.ts

@Directive({
  selector: '[appHideHeader]'
})
export class HideHeaderDirective {
  @Input() header: HTMLElement;

  constructor() { }

  @HostListener('ionScroll')onContentScroll(e) {
    console.log('scroll');
    console.log(e);
  }

}

when I scroll, I get this in the console

scroll
undefined

I tried this and it did not work (which make sense)

<ion-content appHideHeader [header]="header" [scrollEvents]="true" (ionScroll)="onContentScroll($event)">

So, I would like to pass $event to onContentScroll() function in the directive. How can I do that?

Answer 1

HostListener takes two argument first one is type of eventName,second one is array of values. you can pass $event like this

Try this:

@HostListener('ionScroll', ['$event'])onContentScroll(e) {
    console.log('scroll');
    console.log(e);
  }