Tính Reactivity trong Angular

Khi bất kỳ thuộc tính public nào thay đổi, template sẽ phản ứng một cách reactive, tức là thay đổi ngay lập tức. Đó là cách reactivity hoạt động trong Angular.

Hãy xem xét một ví dụ. Giả sử chúng ta có một thuộc tính chứa văn bản:

export class AppComponent {
	public text: string = '';
}

Hãy hiển thị thuộc tính của chúng ta trong một thẻ nào đó:

<div>
	{{ text }}
</div>

Bây giờ hãy tạo một nút bấm, khi nhấp vào đó sẽ gọi một phương thức của class:

<button (click)="show()">
	show
</button>

Trong phương thức này, chúng ta sẽ thay đổi văn bản:

export class AppComponent {
	public text: string = '';
	
	public show(): void {
		this.text = 'hello';
	}
}

Bây giờ, nếu chạy code và nhấn vào nút bấm, thì ngay sau khi nhấn, văn bản trong thẻ div sẽ thay đổi.

Hãy tạo một thẻ div và hai nút bấm. Làm sao để khi nhấn vào nút thứ nhất, một văn bản hiện ra trong div, còn khi nhấn vào nút thứ hai - một văn bản khác hiện ra.