Get initial resize of window for Angular2 app component

Question

In my app.html I have:

<div id="wrapper" 
    (document:load)="onWindowLoadOrResize($event)" 
    (window:resize)="onWindowLoadOrResize($event)">

This is used to set the height on the css for a content div. The resize is working fine, but it does not fire initially on the page load. The document:load does not fire at all. What is the best way to run code that will see the initial size of the window?

I'm not sure that would work. All your code is loaded after the document was loaded. See this fiddle to see what's going on. The first event listener runs, the second one doesn't, so it's happening the same in your code. — Eric Martinez
– Eric Martinez, Commented Dec 2, 2015 at 6:13

jornare · Accepted Answer · 2015-12-04 11:53:52Z

3

At this point in your application, document.load is already fired. Easiest for you would probably be to do call the resizing function from your app-components constructor. At this point your DOM is ready, and the application is firing up. Also, you should assign the height value to a property in your app that the template can bind to rather than do DOM manipulation directly.

answered Dec 4, 2015 at 11:53

jornare

2,89321 silver badges28 bronze badges

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

Comments

Natarajan Ganapathi · Accepted Answer · 2016-03-21 05:51:15Z

2

export class Application implements OnInit {
    ngOnInit() {
        window.onresize = this.onWindowLoadOrResize;
        this.onWindowLoadOrResize();
    }
    private onWindowLoadOrResize() {
      //TODO: your logic        
    }
}

answered Mar 21, 2016 at 5:51

Natarajan Ganapathi

5951 gold badge7 silver badges20 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:54:39Z

2

I was faced with a similar problem. Here is the solution I came up:

ngOnInit() {
  console.log('document.load: ', window.innerWidth);
}

@HostListener('window:resize', ['$event'])
onResize(event) {
  console.log('resize event: ', event.target.innerWidth);
}

Reference: Angular2 get window width onResize

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Aug 9, 2016 at 23:24

acumartini

4116 silver badges10 bronze badges

Collectives™ on Stack Overflow

Get initial resize of window for Angular2 app component

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related