How to use the Angular @HostListener onLoad to get the current width of the viewport?

I'm currently using the Angular @HostListener to get the current width of the viewport onResize() like this:

@HostListener('window:resize', ['$event'])
onResize(event?) {
window.innerWidth <= 400 ? this.width = 200 : this.width = 400;
}


But I also need a way to set this.width onLoad() of the component (in the constructor or at least in the ngOnInit() lifecycle).

I didn't found a way to do this with the HostListener. Is there a good alternative to get the current width of the viewport (on resize and on load) and react to it?

My goal is the set the maxWidth of a Leaflet-PopUp on mobile viewport sizes.

Continue reading...