3.3. Class binding and Style binding - quan1997ap/angular-app-note GitHub Wiki

1. CLASS BINDING

[class]="classExpr"

Demo:

[class.tab-active] = "isTabActive"

[class] = "my-class-1 my-class-2 my-class-3"

[class] = ['foo', 'bar']

[class] = {foo: true, bar: false}

[ngClass] = "{'first': true, 'second': true, 'third': false}"

[ngClass] = "{'class1 class2 class3' : true}"

[ngClass]="(step=='step1')?'my-class1':'my-class2'"

2. STYLE BINDING

[style.width] = "someValue"

[style] = "styleExpr"

Demo:

[style] = "width: 100%; height: 100%"

[style] = ['width', '100px']

[style] = {width: '100px', height: '100px'}

[ngStyle]="{'background-color': (vars.state=='Signup') ? '#73c7af' : '#ffffff'}"