Update

Question

47

Angular 2.0 and ng-style

rated 0 times [ 53] [ 6] / answers: 1 / hits: 44261 / 9 Years ago, sun, august 30, 2015, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

sergiobrayanc

Add To Favorites

Follow

Total Points: 162

Total Questions: 97

Total Answers: 94

Location: Lesotho

Member since Wed, Jun 2, 2021

3 Years ago

sergiobrayanc questions

1 What is the meaning of error NG02100 in Angular?

Fri, Jun 24, 22, 00:00, 2 Years ago

1 Typescript Element implicitly has an 'any' type because expression of type 'Rank' can't be used to index type 'IPowerCards'

Fri, Apr 15, 22, 00:00, 2 Years ago

1 What is a WebSocket Subprotocol?

Fri, May 7, 21, 00:00, 3 Years ago

1 Get guild members and filter them (Discord.js)

Wed, Oct 14, 20, 00:00, 4 Years ago

1 event.currentTarget.value returning undefined javascript

Mon, Jul 6, 20, 00:00, 4 Years ago

View All

answered 9 Years ago jeffery · Accepted Answer

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)