Tiep Phan · · 2 min read
JavaScript · Lập Trình · Lập Trình Angular · Programming · Web Development
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:
<element [style.style-property]="expression"></element>
<!-- or camel case -->
<element [style.styleProperty]="expression"></element>
<!-- or dash case with unit -->
<element [style.style-property.<unit>]="expression"></element>
<!-- or camel case with unit -->
<element [style.styleProperty.<unit>]="expression"></element>
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:
<element [class.<className>]="expression"></element>
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>