This is what I am trying to do:

import { Directive, HostListener, Input } from '@angular/core';



@Directive({

selector: '[appResizeWindow]'

})

export class ResizeWindowDirective {

@Input('appResizeWindow') line_ChartOptions: {};



constructor() { }



@HostListener('window:resize', ['$event']) onResize(event: Event) {

console.log('Yo');

if (event.target['innerWidth'] < 420)

  this.line_ChartOptions['hAxis']['format'] = 'MMM';

else if (event.target['innerWidth'] < 760)

  this.line_ChartOptions['hAxis']['format'] = 'MM. yy'';

else this.line_ChartOptions['hAxis']['format'] = 'MMM d, yyyy';

}



@HostListener('load', ['$event']) onPageLoad(event: Event) {

   console.log('loaded');

   this.onResize(event.target['innerWidth']);

  }

}

So 'window.resize' works perfect when I attack in in the template.

The problem is with load. I event tried onload

I want the page to execute when the page is loaded.

What am I missing here?