Binding child div's height to parent height

Question

Binding child div's height to parent height doesn't seem to work

<div #parentdiv style="background-color:blue;height:1000px">
    <div style="background-color:red" [style.height.px]="parentdiv.height">
      hallo
    </div>
</div>

Here is a plunkr https://plnkr.co/edit/ifWbZSQ9FeiV6n1g9bes?p=preview

Answer 1

There are plenty of ways to do it with CSS (for example, check Pankaj's answer). But if you really-really need to go with javascript (believe me, you don't), then use offsetHeight property:

<div #parentdiv style="background-color:blue;height:1000px">
  <div style="background-color:red" [style.height.px]="parentdiv.offsetHeight">
    hallo
  </div>
</div>

Demo: https://plnkr.co/edit/QEH4fNoZlmTCn34hnh12?p=preview

That being said, what I posted here is for educational purposes, prefer CSS approach, over this one.

Answer 2

It can be easily achieve by CSS height: inherit

@Component({
  selector: 'my-app',
  styles: [`
    .myHeight{
      height: inherit;
      background-color:red;
    }
  `]
  template: `
    <div #parentdiv style="background-color:blue;height:1000px">
        <div class="myHeight">
          hallo
        </div>
    </div>
  `,
})

Demo