Thursday, April 25, 2024
 Popular · Latest · Hot · Upcoming
65
rated 0 times [  67] [ 2]  / answers: 1 / hits: 32884  / 7 Years ago, sun, july 16, 2017, 12:00:00

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?


More From » angular

 Answers
35

The load event has already happened before your component/directive is even initialized.



Just add your code to ngAfterViewInit()
If your component/directive is removed and re-added after it was first initialized, you need to take care yourself that the code isn't executed more than once by using a global service or a static variable to store the status.


[#57063] Thursday, July 13, 2017, 7 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
marcos

Total Points: 331
Total Questions: 106
Total Answers: 104

Location: Gabon
Member since Sat, Jul 25, 2020
4 Years ago
marcos questions
Thu, Feb 24, 22, 00:00, 2 Years ago
Sat, Apr 17, 21, 00:00, 3 Years ago
Mon, Feb 1, 21, 00:00, 3 Years ago
Tue, Jan 26, 21, 00:00, 3 Years ago
Wed, Jan 6, 21, 00:00, 3 Years ago
;