Реактивность в Angular

При любых изменениях публичных свойств, темплейт будет реагировать реактивно, то есть мгновенно изменяться. Так работает реактивность в Angular.

Давайте посмотрим на примере. Пусть у нас есть свойство, содержащее текст:

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

Выведем наше свойство в каком-нибудь теге:

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

Теперь сделаем кнопку, по клику на которую будет вызываться метод класса:

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

В этом методе поменяем текст:

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

Теперь, если запустить код и нажать на кнопку, то сразу после нажатия поменяется текст в диве.

Сделайте див и две кнопки. Сделайте так, чтобы по нажатию на первую кнопку в див попал один текст, а по нажатию на вторую - другой текст.