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.