Thử Nghiệm Với Angular 2 Phần 4: Built-in Directives NgStyle, NgClass


Built-in Directives NgStyle, NgClass

Trong những bài trước của series Thử Nghiệm Với Angular 2 mình đã giới thiệu một số Structual Directives và hướng dẫn Style cho Component, View Encapsulation. Trong bài học này, chúng ta sẽ tìm hiểu về những Attribute Directives như NgStyle, NgClass và property binding cho class, style.

Style binding

Cú pháp:

[style.style-property]="expression"
// or camel case
[style.styleProperty]="expression"
// or
[style.style-property.<unit>]="expression"
// or
[style.styleProperty.<unit>]="expression"

Example:

<button [style.color]="isSpecial ? 'red': 'green'">Some button</button>

<button [style.font-size.em]="isSpecial ? 3 : 1" >Yes, another button</button>
<button [style.font-size.%]="!isSpecial ? 150 : 50" >Huh, button again</button>

Tương tự cho camel case và unit px, rem, vh, vw, …

NgStyle

Cú pháp:

<some-element [ngStyle]="{'font-style': styleExp}">...</some-element>
<some-element [ngStyle]="{'max-width.px': widthExp}">...</some-element>
<some-element [ngStyle]="objExp">...</some-element>

Example:

<div [ngStyle]="{
    // CSS property names
    'font-style': canSave ? 'italic' : 'normal',        // italic
    'font-weight': !isUnchanged ? 'bold' : 'normal',    // normal
    'font-size.px': isSpecial ? 24 : 8,                 // with unit
  }">
  This div is cool.
</div>

Hoặc:

<div [ngStyle]="objStyle">
  This div is cool.
</div>
objStyle = {
  // CSS property names
  'font-style': this.canSave ? 'italic' : 'normal',        // italic
  'font-weight': !this.isUnchanged ? 'bold' : 'normal',    // normal
  'font-size.px': this.isSpecial ? 24 : 8,                 // with unit
};

Class binding

Cú pháp:

[class.<className>]="expression"

Example:

<button class="btn" [class.active]="isActive">
    Some button need toggle class active base on isActive variable
</button>

<button class="btn" [class.active]="tabIndex == 1">
    Some button need toggle class active base on conditional tabIndex == 1
</button>

NgClass

Cú pháp:

<some-element ngClass="first second">...</some-element>     // bind string
<some-element [ngClass]="'first second'">...</some-element> // bind string value
<some-element [ngClass]="['first', 'second']">...</some-element> // bind array
<some-element [ngClass]="{    // bind object
    'first': true,
    'second': true,
    'third': false
    }">
    ...
</some-element>
<some-element [ngClass]="stringExp|arrayExp|objExp">    // variable
    ...
</some-element>

string: là một list các CSS class, cách nhau bởi dấu cách.

array: là array string CSS class.

object: key -> value, nếu value = true thì add, ngược lại thì remove.

Example:

<button class="btn" [ngClass]="'active btn-primary'">
    String binding
</button>
// or
<button class="btn" ngClass="active btn-primary">
    String binding
</button>
// or
<button class="btn" [ngClass]="['active', 'btn-primary']">
    Array binding
</button>
// or
<button class="btn" [ngClass]="{active: tabIndex == 1}">
    Object binding
</button>

Video bài học

Tham khảo

NgStyle

NgClass

Back to blog