0

Can anyone tell my this works

[style.height]="events?.length === 0 ? 'calc(100vh - 105px)' : null"

but this doesn't?

[ngStyle]="{'height: calc(100vh - 105px)': events?.length === 0 }"

or this?

[style.height]="{'calc(100vh - 105px)': events?.length === 0 }"
chuckd
  • 13,460
  • 29
  • 152
  • 331

1 Answers1

2

On ngStyle, you need to put the style attribute with values as json data. On that json data, the key should style name and the value should be the css attribute value as follows.

[ngStyle] = "{ 'height': events?.length === 0 ? 'calc(100vh - 105px)' : null }"

But on your code,

[ngStyle]="{'height: calc(100vh - 105px)': events?.length === 0 }"

You have put the full [style name]: [style value] as the key on json data and it won't work on ngStyle.

And [style.height] indicates the height css attribute on style html attribute. So [style.height]="'100px'" has the same meaning with style="height: 100px;".

And on this code,

[style.height]="{'calc(100vh - 105px)': events?.length === 0 }"

You have put json object into style.height and this is not acceptable as height css attribute value so it's not working.

Derek Wang
  • 10,098
  • 4
  • 18
  • 39
  • I'm trying to find a simpler solution (without ternary operator) Trying the other examples but not having any luck. Is there any way to do it without the ternary? – chuckd Oct 08 '20 at 19:40
  • You can use [ngClass] instead. Make a class named ".abc { height: calc(100vh - 105px); } and use as follows. `[ngClass]="{ 'abc': events.length === 0 }"` – Derek Wang Oct 08 '20 at 19:42
  • I already have a ngClass like this [ngClass]="StyleLeftCol" with some variable – chuckd Oct 08 '20 at 19:43
  • Or you can make variable named `additionalStyles` on controller and add additional styles due to events to that value. And can set `[style]="additionalStyles"` on template. @user1186050 – Derek Wang Oct 08 '20 at 19:49
  • I created this and I think it's prob the best for me. [ngClass]="{ StyleLeftCol: true, 'full-height': events?.length === 0}" – chuckd Oct 08 '20 at 19:51
  • But wondering if there is a way to minimize 'StyleLeftCol: true' – chuckd Oct 08 '20 at 19:51
  • You can directly put it into `class="StyleLeftCol" [ngClass]="{ 'full-height': events?.length === 0 }"` – Derek Wang Oct 08 '20 at 19:52