Conditional reactivity in Angular

Reactivity will also work with ngIf conditions. This means we can show or hide a block depending on what is contained in the class property.

Let's try it in practice. Let's say we have the following block

<div>
	text
</div>

Let's show or hide it conditionally:

<div *ngIf="isShow">
	text
</div>

Now let's make two buttons. By clicking on the first one we will show our block, and by clicking on the second one we will hide it:

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

Let's add a property to the component class that will control whether the block is shown or not:

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

Now let's write the implementation of our methods for showing and hiding the block:

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

Make a button that when clicked will toggle the block: show if it is hidden, and hide if it is shown.