-2

I would like to calculate the min-height of an element doing somening like that:

min-height: calc(50vh - height-of-other-element);

where height-of-other-element is height of a element that can be rendered or not using angular *ngIf.

How can I solve this problem?

1

2 Answers 2

1

if you use a template reference and not *ngIf="condition" else [style.display]="!condition?'none':null you can use some like

<div #element [style.display]="!toogle?'none':null" >
...
</div>

<div [style.min-height]="'calc(50vh - '+element.getBoundingClientRect().height+'px)'" >
   ...
</div>

You can see an example in this stackblitz

NOTE: I think that you can use css flex wrapping the two divs in another one and not use "calc". If you want to know about css flex, I like this link

0

I suggest you use a conditional class via ngIf. Basically you can create 2 css classes, one with min-height: calc(50vh - height-of-other-element); and other only with min-height: 50vh. Then in your HTML, use something like ngClass to select the correct class for your div.

You can check this question to see some examples: Angular: conditional class with *ngClass

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.