Ràng buộc CSS trong Angular
Trong Angular, bạn cũng có thể trực tiếp thêm kiểu cho một phần tử. Điều này được thực hiện bằng cách sử dụng thuộc tính thẻ, được viết theo định dạng sau:
[style.styleProperty]="property value"
Trong đó, tên của các thuộc tính CSS có dấu gạch ngang bên trong, trong trường hợp của chúng ta sẽ được viết dưới dạng camelCase. Hãy xem các ví dụ để hiểu cách thức hoạt động.
Ví dụ
Hãy đặt nền cho một phần tử:
<div [style.backgroundColor]="'blue'">
text
</div>
Ví dụ
Giả sử chúng ta có một thuộc tính chứa màu nền:
export class AppComponent {
public value: string = 'red';
}
Hãy áp dụng thuộc tính này làm giá trị cho kiểu:
<div [style.backgroundColor]="value">
text
</div>
Ví dụ
Giả sử chúng ta có một thuộc tính boolean:
export class AppComponent {
public isActive: boolean = true;
}
Chúng ta sẽ ràng buộc các giá trị CSS khác nhau với một thuộc tính CSS tùy thuộc vào nội dung của thuộc tính boolean. Hãy sử dụng toán tử ba ngôi để làm điều này:
<div [style.backgroundColor]="isActive ? 'blue' : 'red'">
text
</div>
Bài tập thực hành
Cho một khối. Hãy làm sao để cú nhấp chuột đầu tiên lên khối tô màu đỏ cho nó, và cú nhấp chuột thứ hai - tô màu xanh lá.
Cho một khối. Cho một nút bấm. Hãy làm sao để việc nhấn vào nút làm tăng chiều rộng của khối lên gấp đôi.
