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:

<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?

Do you have a plnkr to reproduce it? – Eric Martinez Aug 30 '15 at 19:58 — Eric Martinez, Aug 30 '15 at 19:58
sorry, no. I will try to create one. 10x – Yaniv Efraim Aug 30 '15 at 19:59 — Yaniv Efraim, Aug 30 '15 at 19:59

score 52 · Accepted Answer · edited Jun 20 '20 at 09:12

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)

score 19 · Answer 2 · answered Aug 03 '16 at 08:48

19

For specific style, you can also use this:

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

answered Aug 03 '16 at 08:48

nir

3,050
2
20
19

16

or `
` ;-)
– Günter Zöchbauer Aug 03 '16 at 08:49
1

what about mixing units e.g calculating a height on % and px? – artdias90 Jan 03 '17 at 14:22
@artdias90 You can't calculate with different units. You can set the unit like in my comment or like in the answer. JS can only calculate with plain numbers. – Günter Zöchbauer Jan 24 '17 at 17:08

score 0 · Answer 3 · answered Jan 16 '18 at 04:52

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>

Angular 2.0 and ng-style

3 Answers3

Update

Linked