CODEWITHSUNDEEP
angular
Yuriy
Yuriy

Reputation: 457

can I use expressions like 'calc' inside [style.width] directive?

Is it possible to use my variable inside calc() inside [style.width] directive in angular?

Something like this:

<div [style.width.px]="calc(100% - myWidth)">some texts </div>

Upvotes: 0

Views: 566

Answers (2)

EtK
EtK

Reputation: 96

You can also declare a style object in your .ts file:

mywidth = 20;
styleObj = {width: `calc( 100% - ${this.mywidth}px)`};

and put it into your html:

<div [ngStyle]="styleObj">some texts </div>

Upvotes: 2

Adrita Sharma
Adrita Sharma

Reputation: 22213

Yes.

TS:

myWidth: string = '100px';

HTML:

<div [style.width]="'calc(100% - ' + myWidth + ')'">some texts </div>

Upvotes: 3

Related Questions