CODEWITHSUNDEEP
htmlcssangulartypescript
surendra kumar
surendra kumar

Reputation: 1780

how to correct below expression in Angular

I want to set the dynamic width in ngStyle. how can i write the expression correct.

[ngStyle]="{{'width': 'calc(chargeStation.response[1].width+'%' - 1+'px')' }}"

i have changed to

[ngStyle]="{'width': 'calc('+ chargeStation.response[1].width +'%'+ ')'}"

than in HTML its taking as object

ng-reflect-ng-style="[object Object]"

Upvotes: 0

Views: 172

Answers (2)

Nirali Gajjar
Nirali Gajjar

Reputation: 116

You can try below solution, it's working for me.

in template file (.html)

<button [ngStyle]="{'width': 'calc(' + chargeStation.width + '% - 1px)'}" (click)="buttonClick()">click</button>

in component file (.ts)

you have to assign value to your object in ts file For Example I have chargeStation object with width property. property has 100 value.

chargeStation = {
    width: 100
  };

Upvotes: 3

Girish Sadanandan
Girish Sadanandan

Reputation: 174

directives accepts objects; so you don't have to add {{}}

[ngStyle]="{width: chargeStation.response[1].width - 1 + 'px'}"

Upvotes: 0

Related Questions