Reactivity in Angular

Whenever public properties change, the template will react reactively, i.e. change instantly. This is how reactivity works in Angular.

Let's look at an example. Let's say we have a property that contains text:

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

Let's display our property in some tag:

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

Now let's make a button that, when clicked, will call the class method:

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

In this method we will change the text:

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

Now, if you run the code and click on the button, the text in the div will change immediately after clicking.

Make a div and two buttons. Make it so that when you click the first button, one text gets into the div, and when you click the second button, another text gets into the div.