How to bind a property to style.width in pixels? How to bind a property to style.width in pixels? angular angular

How to bind a property to style.width in pixels?


Works fine for me

Plunker 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'  }}


This worked for me:

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


For pixel unit

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

Or

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

Other CSS units

<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;}