Sometimes, we want to handle window scroll event in Angular and TypeScript.
In this article, we’ll look at how to handle window scroll event in Angular and TypeScript.
How to handle window scroll event in Angular and TypeScript?
To handle window scroll event in Angular and TypeScript, we create a custom directive.
For instance, we write
export class WindowScrollDirective {
ngOnInit() {
window.addEventListener("scroll", this.scroll, true);
}
ngOnDestroy() {
window.removeEventListener("scroll", this.scroll, true);
}
scroll = (event): void => {
//...
};
}
to create the WindowScrollDirective directive class.
In it, we call window.addEventListener to listen to the window’s scroll event when the directive mounts.
scroll is called when we scroll.
When we destroy the directive, we call removeEventListener to remove the scroll listener.
Conclusion
To handle window scroll event in Angular and TypeScript, we create a custom directive.
