Angular 2.0 And Ng-style

Question

I am building an Angular 2.0 component and I want to control it's style dynamically (using ng-style). After a quick view on Angular 2's docs i tried this:

NgStyle is no longer necessary to be explicitly added in directives property. It's part of the common directives that are added by default.
The syntax has changed, now it must be camel case.

Example

@Component({
  selector : 'my-cmp',
  template : `
    <div class="theme-preview" [ngStyle]="{'font-size': fontSize+'px'}">
   {{fontSize}}
  </div>`
})
classMyCmp {
  @Input('font-size') fontSize;
}

@Component({ 
  selector: 'my-app',
  directives: [MyCmp],
  template: `
    <my-cmp [font-size]="100"></my-cmp>
  `
})

See this plnkr (Updated to beta.1)

Solution 2:

For specific style, you can also use this:

Baca Juga

<div class="theme-preview" [style.font-size]="fontSize+'px'">

Solution 3:

Something like this is actually working on latest version of angular right now 4, the syntax actually changed, please notice the [ngStyle]

.color-box {
    width: 10px;
    height: 10px;
    display: inline-block;
}

<div class="color-box" [ngStyle]="{'background-color': your.model.object.color_code}"></div>

JavaScript Free

Angular 2.0 And Ng-style

Solution 2:

Solution 3:

Post a Comment for "Angular 2.0 And Ng-style"