Cacher is the code snippet organizer for pro developers

[style.*]

<div [style.width.px]="dashboardHeaderStats.saleComplete"></div>

<p [style.font-size.em]="'3'">
  A paragraph at 3em!
</p>

<p [style.font-size.px]="isImportant ? '30' : '16'">
  Some text that may be important.
</p>

<p [style.background-color]="'darkorchid'">
  Quite something!
</p>

ng-style

<input type="button" value="set color" ng-click="myStyle={color:'red'}">
<input type="button" value="set background" ng-click="myStyle={'background-color':'blue'}">
<input type="button" value="clear" ng-click="myStyle={}">
<br/>
<span ng-style="myStyle">Sample Text</span>

[ngStyle]

<div [ngStyle]="{'width': dashboardHeaderStats.saleCompleteChange | percent}"></div>

myStyles = {
'background-color': 'lime',
'font-size': '20px',
'font-weight': 'bold'
}

<p [ngStyle]="myStyles">
  You say tomato, I say tomato
</p>

<p [ngStyle]="{'background-color': 'lime',
    'font-size': '20px',
    'font-weight': 'bold'}">
  You say tomato, I say tomato
</p>

setMyStyles() {
  let styles = {
    'background-color': this.user.isExpired ? 'red' : 'transparent',
    'font-weight': this.isImportant ? 'bold' : 'normal'
  };
  return styles;
}

<p [ngStyle]="setMyStyles()">
  You say tomato, I say tomato
</p>

@Component({
  selector: 'my-app',
  styles: [`div { border: 3px solid red; }`]
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <div [style.width.px]="width">some texts </div>
    </div>
  `
})
export class App {
  name:string;
  width: number = 250;
  constructor() {
    this.name = 'Angular2'
  }
}

[ngClass]

[class.my-class]="step=='step1'"
[ngClass]="{'my-class': step=='step1'}"
[ngClass]="{'my-class': step=='step1', 'my-class2':step=='step2' }"
[ngClass]="{1:'my-class1',2:'my-class2',3:'my-class4'}[step]"
[ngClass]="(step=='step1')?'my-class1':'my-class2'"