Class Binding
Sử dụng để thêm hoặc xóa một hoặc nhiều class CSS vào một HTML element tùy thuộc vào một số điều kiện.
Add 1 class CSS: Có thể add nhiều cho 1 element
<element [class.<className>]="expression">...</element>
Ví dụ:
<button class="btn" [class.active]="tabIndex == 1">Some button need toggle class active base on conditional tabIndex == 1</button>
Add nhiều class CSS
- class property:
<element [class]="classExpresion">...</element>
- ngClass:
<element [ngClass]="classExpresion">...</element>
Với classExpression có thể là string, array string hoặc object:
- string: là một list các CSS class, cách nhau bởi dấu cách.
<element [class]="'cssClass1 cssClass2'">...</element> <element class='cssClass1 cssClass2'>...</element> <element ngClass='cssClass1 cssClass2'>...</element>
<element [ngClass]="'cssClass1 cssClass2'">...</element>
- array: là array string CSS class.
<element [class]="['cssClass1', 'cssClass2']">...</element>
<element [ngClass]="['cssClass1', 'cssClass2']">...</element>
- object: key -> value, nếu value = true thì add, ngược lại thì remove.
<element [class]="{'cssClass1': true, 'cssClass2': true}">...</element> <element [ngClass]="{'cssClass1': true, 'cssClass2': true}">...</element>
Như các bạn thấy, việc sử dụng ngClass không có gì khác biệt với [class]="classExpresion". Và cách sử dụng Class Binding vẫn được khuyến cáo sử dụng hơn ngClass.
Ngoài ra, bạn cũng có thể dùng Class Binding với [className]. className là tên thuộc tính của phần tử HTML. Do đó, chúng ta có thể sử dụng Property Binding để gán tên class cho bất kỳ phần tử HTML nào.
<element [className]="classExpresion">...</element>
Lưu ý: classExpression ở đây chỉ nên sử dụng kiểu string.
<div [className]="'red'">Test</div><div [className]="'red size20'">Test</div>
Lưu ý: Nếu bạn dùng cả class và [className] trong cùng một element sẽ dẫn đến việc loại bỏ class attribute. Do đó, bạn không dùng cả hai.
<div class="red" [className]="'size20'">red</div>
Kết quả sẽ là:
<div class="size20">red</div>
- Thứ tự ưu tiên: [ngClass] > [className] > [class.<className>] > [class]
Style Binding
Sử dụng khi chúng ta cần binding cho style property (inline style).
Add 1 style CSS: Có thể add nhiều cho 1 element
[style.style-property]="style-value"[style.styleProperty]="style-value"// Setting units
[style.style-property.<unit>]="expression"
[style.styleProperty.<unit>]="expression"
- style-value sẽ tính toán về các giá trị kiểu string | undefined | null
- expression sẽ tính toán về các giá trị kiểu number | undefined | null
Lưu ý Một style property có thể dùng cả kiểu dash-key hoặc camelCase, ví dụ font size hoặc fontSize đều được.
Ví dụ:
<p [style.background-color]="'grey'">some paragraph with grey background</p>
<p [style.backgroundColor]="'grey'">some paragraph with grey background</p>
<button [style.color]="status=='error' ? 'red': 'blue'">Button 1</button>
<button [style.color]="getColor()">Button 2</button>
// Setting units
<button [style.font-size.px]="'20'">Big Button</button>
<button [style.font-size.%]="!isSpecial ? 150 : 50" >Huh, button again</button>
<button [style.fontSize.px]="'20'">Big Button</button>
Add nhiều style CSS
- style property:
<element [style]="styleExpresion">...</element>
- ngStyle:
<element [ngStyle]="styleExpresion">...</element>
Với styleExpression có thể là string hoặc object:
- string: là một list các style CSS, cách nhau bởi dấu cách. Chỉ dùng cho style property, không thể sử dụng string value cho ngStyle.
<element [style]="'color: red; font-weight: bold'">...</element> <element style="color: red; font-weight: bold">...</element>
- object: chỉ dùng được thiết lập units trưc tiếp cho ngStyle, không dùng được cho style property.
<element [style]="{'style-property': value}">...</element> <element [ngStyle]="{'style-property': value, 'style-property.unit': value}">...</element>
Ví dụ:
<div [ngStyle]="{'font-size.em': 3, 'color': 'red'}">red</div>
<div [style]="{'font-size': '3em', 'color': 'red'}">red</div>
Lưu ý:
- Trong hầu hết các trường hợp, chúng ta được khuyến cáo sử dụng style binding với style property thay vì ngStyle.
- Thứ tự ưu tiên: [ngStyle] > [style.color...] > [style]
Atribute Binding
Thông thường chúng ta nên đặt element property với property binding bất cứ khi nào có thể. Tuy nhiên, trong một số trường hợp, chúng ta không có element property để binding. Trong những trường hợp này, hãy sử dụng attribute binding.
<p [attr.attribute-you-are-targeting]="expression"></p>
- Khi expression trả về null hoặc undefined. Angular sẽ loại bỏ hoàn toàn thuộc tính đó.
Ví dụ:
<button [attr.aria-label]="actionName">{{actionName}} with Aria</button><a [attr.title]="'ME'" [attr.role]="'button'">Click me</a><tr><td [attr.colspan]="1 + 1">One-Two</td></tr>
Tips:
- Chúng ta có thể dynamic change các class CSS từ component bằng cách tạo một biến để lưu giá trị.
Reference
Tags:
angular