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

Question

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?

Kazimierz Jawor · Accepted Answer · 2024-11-22 10:17:48Z

1

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

edited Nov 22, 2024 at 10:17

Kazimierz Jawor

19.1k7 gold badges38 silver badges58 bronze badges

answered Jun 9, 2020 at 16:02

mk1x86

1884 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related