Set height of div equal to height of window angular

Question

How could I set the height of a div equal to the height of the window? I've found on this question Dynamically updating css in Angular 2 saying that I must use code below:

<div class="home-component" 
     [style.width.px]="width" 
     [style.height.px]="height">Some stuff in this div</div>

I've update this code like code below:

<div class="imagecontainer" [style.height.px]="window.innerHeight">
    Some code
</div>

But this give me next error:

Cannot read property innerHeight of undefined

My questions are now:

How could I set the height of the div equal to the height of the inner window with Angular and TypeScript?
How could I do this in one time, because I've to do this multiple times?

score 20 · Accepted Answer · answered Dec 26 '16 at 17:19

20

It's not working because angular2 is trying to search for this.window.innerHeight.

Update your component,

@Component({...})
export class MyClass {

    myInnerHeight: window.innerHeight;
    constructor(){}

}

and use it like this:

<div class="imagecontainer" [style.height.px]="myInnerHeight">
    Some code
</div>

answered Dec 26 '16 at 17:19

eko

39,722
10
72
98

I was trying to use `[style.height]`, is there some docs which I can refer to get to know these properties? – Giridhar Karnik Jan 05 '17 at 05:31
@GiridharKarnik https://angular.io/docs/ts/latest/guide/template-syntax.html#!#style-binding – eko Jan 05 '17 at 05:33
@eko, how about the other way around? Like I want to get the height instead of setting it. – Artanis Zeratul Feb 27 '19 at 04:21
@ArtanisZeratul maybe https://stackoverflow.com/questions/49999988/angular-2-get-element-height? – eko Feb 27 '19 at 07:49
@eko, JaggerJo answer works... but it has to be put on OnInit() function not on the constructor. but thank you so much leads and information. – Artanis Zeratul Mar 01 '19 at 02:10
@ArtanisZeratul glad you figured it out :-) – eko Mar 01 '19 at 07:58

Set height of div equal to height of window angular

1 Answers1

Linked