OnScroll Event is not working – Angular Dart

Issue

I have an issue with the window.onScroll event. The event was never triggered.

That’s my first try:

  @override
  void ngOnInit() {

    window.onScroll.listen((Event event) => print("it works.."));
  }

But it’s not working.

I basiclly need the onScroll event. Not more. So i tried the “old school” way in Html

My second try:

    <div (scroll)="onScroll()">

       <!--Some content-->

    </div>

But it’s also not working.

What is the best solution to get the scroll event in AngularDart?

By the way, i use AngularDart 5.

Solution

There are multiple solutions to this problem.

The first thing that you need to do is get a reference to the HTML element that you want to get scroll events from. I pretend that this element looks like the following (in your components .html file):

<div>Some scrollable content</div>

As far as I know, there are two ways of getting a reference to an HTML element in AngularDart.

First solution:

Use the @ViewChild annotation. For this to work, you need to add a template reference variable to the div. I call it “scrollable”, however it is up to you how you will call it.

<div #scrollable>Some scrollable content</div>

Then add the following property to your component class:

@ViewChild("scrollable")
  Element scrollable;

Second (but not recommended) solution:

Add an id to the div (the name of the id does not matter):
Get the reference to the div by using document.getElementById() provided by dart:html:

Element scrollable = document.getElementById('scrollable')

The problem with this solution is, that document is not available in any of the AngularDart life cycle hooks as far as i know.

Finally, to listen to the onScroll stream of the scrollable element just do the following somewhere in your component class:

something.onScroll.listen((Event event) => print("Hurray, it works :)"))

Answered By – Tobias Marschall

Answer Checked By – Cary Denson (FlutterFixes Admin)