Pass data to child component on scroll


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.content.ionScroll.subscribe(event => this.listenScroll(event));

  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>

In child component I have:

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

And in child html I have:

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

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?


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