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 }"
On ngStyle, you need to put the style attribute with values as
json
data. On thatjson
data, the key shouldstyle
name and the value should be the css attribute value as follows.But on your code,
You have put the full
[style name]: [style value]
as the key onjson
data and it won't work onngStyle
.And
[style.height]
indicates theheight
css attribute onstyle
html attribute. So[style.height]="'100px'"
has the same meaning withstyle="height: 100px;"
.And on this code,
You have put
json
object intostyle.height
and this is not acceptable asheight
css attribute value so it's not working.