In this comprehensive explanation, Günter Zöchbauer's answer has been hailed as exceptional (with upvotes received). Let me touch upon some key points:
Angular2's Zone library is noted for extensively patching various APIs, particularly the event listener APIs. However, it does not extend to the window/element on<EVENT> properties, possibly due to their outdated and discouraged nature.
For seamless functionality, utilizing the addEventListener API is strongly recommended.
Illustrated below is an example:
export class SomeClass {
private isInfinitiveScrollLoaderEnabled: boolean;
constructor(private ngZone: NgZone) {
this.isInfinitiveScrollLoaderEnabled = false;
}
ngOnInit() {
window.addEventListener('scroll', (event) => {
if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
console.log('Bottom of page');
this.isInfinitiveScrollLoaderEnabled = true;
}
});
}
}
Additionally, for those keen on abstracting DOM elements for compatibility with server rendering or mobile frameworks such as NativeScript / ReactNative, alternative options can be explored:
import {DOM} from 'angular2/platform/common_dom.dart';
DOM
.getGlobalEventTarget('window')
.addEventListener('message', function, false);
Alternatively,
@HostListener('window:scroll', ['$event'])`
This approach appears most declarative in my opinion.
Both alternatives align with Günter Zöchbauer's guidance.
While navigating these rendering considerations may seem unfamiliar within your codebase, the choice ultimately lies with you and should prove satisfactory.
Regardless of your decision, it is advisable to steer clear of using the this.ngZone.run() option, as it tends to evoke unfavorable comparisons to the days of $scope.$apply(), although admittedly less severe.