setting width with calc() in [ngStyle] with angular(not js) variable not working

This is Angular 8 related question. not angular JS where declarations/syntax is different.

I am setting width of a div dynamically via angular variable. Here is my template looks like:

<nav class="navbar-dark"
[ngClass]="isDefault() ? 'navbar-original': 'navbar'"
[ngStyle]="{ 'margin-left.px': navbarMargin, 'width.px': 'calc(100% - ' + navbarMargin + 'px)' }">


In here, margin-left is working fine but width is not updating.

Tried

[style.width.%]="sanitizer.bypassSecurityTrustStyle('calc(100% - 80px)')"


and

[ngStyle]="{'width.px': width}"


and various combinations of these. Nothing is updating width.

What exactly I am missing?

Continue reading...