Gắn hàng loạt lớp CSS trong Angular

Sử dụng directive ngClass có thể bật và tắt một tập hợp các lớp CSS ngay trong thẻ. Directive nhận một đối tượng làm giá trị, trong đó các khóa là các lớp, và giá trị - các giá trị boolean. Lớp sẽ được bật nếu giá trị của nó được đặt là true và bị tắt nếu là 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 các ví dụ về cách bật và tắt các lớp này cho một khối.

Ví dụ

Bật một lớp và tắt lớp kia:

<div [ngClass]="{blue: true, bold: false}">
	text
</div>

Ví dụ

Giả sử trạng thái của các lớp được lưu trong các thuộc tính của class:

export class AppComponent {
	public isBlue: boolean = true;
	public isBold: boolean = false;
}

Gắn 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 [ngClass]="{blue: isBlue, bold: isBold}">
	text
</div>

Ví dụ

Thuộc tính có thể là một đối tượng chứa đầy đủ các lớp và trạng thái của chúng:

export class AppComponent {
	public styles = {
		blue: false,
		bold: true,
	}
}

Gắn đối tượng này vào khối của chúng ta:

<div [ngClass]="styles">
	text
</div>

Ví dụ

Có thể lấy giá trị cho đối tượng của chúng ta từ các thuộc tính khác của class:

export class AppComponent {
	public isBlue: boolean = false;
	public isBold: boolean = true;

	public styles = {
		blue: this.isBlue,
		bold: this.isBold,
	}
}

Gắn đối tượng này vào khối của chúng ta:

<div [ngClass]="styles">
	text
</div>

Bài tập thực hành

Tạo hai lớp CSS. Hãy để một trong số chúng xác định nền của khối và lớp còn lại - kích thước font chữ.

Tạo hai nút bấm. Hãy để việc nhấn vào nút đầu tiên chuyển đổi lớp thứ nhất, và nhấn vào nút thứ hai - chuyển đổi lớp thứ hai.