Tính phản ứng của điều kiện trong Angular

Tính phản ứng cũng sẽ hoạt động với các điều kiện ngIf. Điều này có nghĩa là chúng ta có thể hiển thị hoặc ẩn một khối tùy thuộc vào những gì chứa trong thuộc tính của lớp.

Hãy thử thực hành. Giả sử chúng ta có khối sau

<div>
	văn bản
</div>

Hãy hiển thị hoặc ẩn nó theo điều kiện:

<div *ngIf="isShow">
	văn bản
</div>

Bây giờ hãy tạo hai nút. Khi nhấp vào nút thứ nhất, chúng ta sẽ hiển thị khối của mình, và khi nhấp vào nút thứ hai - ẩn nó đi:

<button (click)="show()">
	hiển thị
</button>
<button (click)="hide()">
	ẩn
</button>

Hãy thêm vào lớp component một thuộc tính sẽ điều chỉnh việc khối có được hiển thị hay không:

export class AppComponent {
	public isShow: boolean = true;
}

Và bây giờ hãy viết phần triển khai cho các phương thức để hiển thị và ẩn khối:

export class AppComponent {
	public isShow: boolean = true;
	
	public show(): void {
		this.isShow = true;
	}
	public hide(): void {
		this.isShow = false;
	}
}

Hãy tạo một nút, việc nhấn vào nó sẽ chuyển đổi trạng thái của khối: hiển thị nếu nó đang bị ẩn, và ẩn nếu nó đang được hiển thị.