Angular2 is providing ngStyle to set CSS dynamically as like Angular1, but syntax is different. We can assign CSS element  by using JavaScript element.

Using ngStyle

Observe below highlighted code. [] represents one way binding
<button (click)="myStyle={color:'red'}">Set Color</button>
<button (click)="myStyle={'background-color':'blue'}">Set Background color</button>
<button (click)="myStyle = {}">clear</button>
<div [ngStyle]="myStyle">Click above button to set text color</div>
View DEMO

Using element style property

Observe below code. Here style.width was bound to myStyleWidth
<div [style.width.px]="myStyleWidth" [style.border]="myBorderStyle">
  sample text in div
</div>
Div Width :: <input [(ngModel)]="myStyleWidth"/>
border style :: <input [(ngModel)]="myBorderStyle"/>
View DEMO

2 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. Set CSS to element with angular2. It is an employment boost reviews styling sheet which have some stylish function for all the developers. Hope you guys can choose reading data which programmer telling you the most cause here are some simple effects which are increased the demand for styling.

    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts