How to bind a property to a Pixel Width style in Angular 2?

Question

I am using Angular 2.0 and I wrote the code below:

<div [style.width.px]="width">some texts </div> 

I also tried

 <div [ngStyle]="{'width.px': width}">some texts </div> export class MyComponent { width: number = 150; } 

But it does not bind the width to the div element.

I am using the latest version of Angular 2.0.

What am I doing wrong?

Answer 1

Works great for me

Plunger example

 @Component({ selector: 'my-app', styles: [`div { border: 3px solid red; }`] template: ` <div> <h2>Hello {{name}}</h2> <div [style.width.px]="width">some texts </div> </div> `, }) export class App { name:string; width: number = 250; constructor() { this.name = 'Angular2' } } 

Answer 2

This worked for me:

 <div [style.width]="paymentPerc+'%'"> Payment Recieved</div> 

Answer 3

Check the same as below:

 <div [style.width]="width+'px'">some texts </div> export class MyComponent { width: number = 150; } 

Answer 4

For pixel

 <div [style.width.px]="width"> Width Size with px</div> 

Or

 <div bind-style.width.px="width"> Width Size with px</div> 

Other CSS Modules

 <div [style.width.em]="width"> Width Size with em</div> <div [style.width.pt]="width"> Width Size with pt</div> <div [style.width.%]="width"> Width Size with %</div> 

Component

 export class MyComponent { width: number = 80; }