How to trigger window resize event in Angular

Question

I am using a Angular plugin on data table. The container of the data table is resizable, while through the doc I learned that the data table it self will resize when there is a window resize event. In jQuery I know there is a $(window).trigger() but I don't know how to do that in angular.

My question is: in parent angular directive, how do I trigger that window resize event?

Pengyy · Accepted Answer · 2018-06-07 06:26:26Z

75

You can trigger window.resize event by

window.dispatchEvent(new Event('resize'));

And for listening to window.resize, use HostListener as below example:

@HostListener('window:resize', ['$event'])
sizeChange(event) {
  console.log('size changed.', event);
}

live demo

edited Jun 7, 2018 at 6:26

answered Aug 2, 2017 at 5:13

Pengyy

38.3k15 gold badges85 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Zanecola Over a year ago

Thanks for the answer. Is this piece of code listening to the window.resize event?

Pengyy Over a year ago

@Zanecat yeah, it is. you can confirm by change the size of the browser window. for the plunker demo, remember to open the console to see the message. :-)

Zanecola Over a year ago

Well, but I want to trigger this event rather than listen to it.

Pengyy Over a year ago

@Zanecat well, sorry for misunderstood your question, I have add what you want to my answer.

Zanecola Over a year ago

Thanks that helps a lot.

Collectives™ on Stack Overflow

How to trigger window resize event in Angular

1 Answer 1

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Linked

Related