Реактивност на условия в Angular

Реактивността също ще работи с условия ngIf. Това означава, че можем да показваме или скриваме блок в зависимост от това какво се съдържа в свойството на класа.

Нека опитаме на практика. Да кажем, че имаме следния блок

<div>
	text
</div>

Нека да го показваме или скриваме по условие:

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

Нека сега направим два бутона. При клик върху първия ще показваме нашия блок, а при клик върху втория - ще го скриваме:

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

Нека добавим в класа на компонента свойство, което ще регулира дали блокът е показан или не:

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

А сега нека напишем реализацията на нашите методи за показване и скриване на блока:

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

Направете бутон, чието натискане ще променя състоянието на блока: да го показва, ако е скрит, и да го скрива, ако е показан.