Sometimes, we want to listen for window resize event with Angular.
In this article, we’ll look at how to listen for window resize event with Angular.
How to listen for window resize event with Angular?
To listen for window resize event with Angular, we can use the HostListener
decorator.
For instance, we write
//...
export class Component implements OnInit, AfterViewInit {
//...
@HostListener("window:resize", ["$event"])
onResize(event) {
event.target.innerWidth;
}
//...
}
to listen for window resize event with the onResize
method modified by the HostListener
decorator.
We call HostListener
with the 'window.resize'
event and ["$event"]
to listen for the window resize event.
And we get the event
object from the onResize
method’s parameter.
Conclusion
To listen for window resize event with Angular, we can use the HostListener
decorator.