Angular 2.0 and ng-style
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:
<div class="theme-preview" ng-style="{'font-size': fontSize}">
{{fontSize}}
</div>
And saw that the size is actually printed inside the div but did not affected the style. fontSize is one of component’s property bindings’, meaning the component gets it from its parent like this:
<my-component [font-size]="size" />
While inside the component I have:
@Component({
selector: 'XXX',
properties: ['fontSize']
})
Am I missing something here?
Update
People still reach this answer, so I’ve updated the plnkr to beta.1. Two things have changed so far
- 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>`
})
class MyCmp {
@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)
For specific style, you can also use this:
<div class="theme-preview" [style.font-size]="fontSize+'px'">
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>
The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .
