htmlangularangular8ng-style

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?

Solution

  • Have you tried simply using [style.width]? "calc(100%- 80px)" is a string after all and [style.width.px] expects a number.