Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Set height of div equal to height of window angular

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:

  1. How could I set the height of the div equal to the height of the inner window with Angular and TypeScript?
  2. How could I do this in one time, because I've to do this multiple times?
like image 572
H. Pauwelyn Avatar asked Dec 26 '16 17:12

H. Pauwelyn


People also ask

How do you make the height of a div equal to the screen size?

Syntax: To set a div element height to 100% of the browser window, it can simply use the following property of CSS: height:100vh; Example: HTML.

How do you make the height of a div equal the height of another div?

Answer: Use the CSS3 flexbox With CSS3 flex layout model you can very easily create the equal height columns or <div> elements that are aligned side by side. Just apply the display property with the value flex on the container element and the flex property with the value 1 on child elements.

How do I change the size of a DIV dynamically?

The content height of a div can dynamically set or change using height(), innerHeight(), and outerHeight() methods depending upon the user requirement.


1 Answers

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>
like image 52
eko Avatar answered Nov 16 '22 02:11

eko