Categories
Angular Answers

How to listen for window resize event with Angular?

Spread the love

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.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *