OnScroll Event is not working - Angular Dart

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

window.onScroll

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.

(scroll)="onScroll()"

ngOnInit

2 Answers
2

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):

.html

<div>Some scrollable content</div>

<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.

@ViewChild

div

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

<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:

div

div

document.getElementById()

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.

document

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

onScroll

scrollable

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


div.onScroll.listen((ev)
);


this pretty much works on my tests.

Are you sure that the place you are adding the listener is the one that is in fact scrolling?

div

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy