Pass data to child component on scroll

Ionic Framework ionic-v3
1

I am trying to pass event.scrollTop value from parent component to child components, created with *ngFor. How can I bind variable in child component to update its value every time user scrolls the content?

In parent component I have:

export class HomePage {
 @ViewChild(Content) content: Content;
 scrolled: number;
 ...
 ngOnInit() {
    this.getPosts();
    this.content.ionScroll.subscribe(event => this.listenScroll(event));
  }

 listenScroll(e){
  this.scrolled = e.scrollTop;
 }
}

In my home.html I have:

  <ion-list id="ion-list">
    <news-item *ngFor='let item of items' [item]='item' [scrolled]='scrolled'></news-item>
  </ion-list>

In child component I have:

export class NewsItem implements OnChanges {
    @Input() item: any;
    @Input() scrolled: number;
   ...
}

And in child html I have:

<div id="{{ item.id }}">
 <span>{{ scrolled }}</span>
</div>

So when I scroll and this.scrolled value is updated in parent component, it is not updated in child component. How can I update it’s value inside child component?

2

Solved it by using custom directive with @HostListener for scroll and touch events