Liên kết lớp CSS trong Angular
Trong Angular, bạn có thể bật-tắt việc áp dụng một lớp CSS cho một phần tử. Điều này được thực hiện bằng cách sử dụng một thuộc tính của thẻ, được viết theo định dạng sau:
[class.tên_lớp]="true hoặc false"
Hãy xem xét trong thực tế. Giả sử chúng ta có các lớp sau:
.blue {
color: blue;
}
.bold {
font-weight: bold;
}
Hãy xem xét các ví dụ về cách bật và tắt các lớp này cho một phần tử.
Ví dụ
Hãy bật một lớp và tắt lớp kia:
<div [class.blue]="true" [class.bold]="false">
text
</div>
Ví dụ
Giả sử trạng thái của các lớp được lưu trữ trong các thuộc tính của lớp:
export class AppComponent {
public isBlue: boolean = true;
public isBold: boolean = false;
}
Hãy liên kết khả năng hiển thị của lớp phụ thuộc vào giá trị của các thuộc tính của chúng ta:
<div [class.blue]="isBlue" [class.bold]="isBold">
text
</div>
Bài tập thực hành
Cho lớp CSS sau:
.hidden {
visibility: hidden;
}
Hãy liên kết lớp này với một phần tử. Tạo một nút bấm, khi nhấp vào, phần tử sẽ ẩn hoặc hiện.
