Reaktivität von Bedingungen in Angular

Reaktivität funktioniert auch mit ngIf-Bedingungen. Das bedeutet, dass wir einen Block anzeigen oder ausblenden können, abhängig davon, was in der Klassen-Eigenschaft enthalten ist.

Lasst es uns praktisch ausprobieren. Angenommen, wir haben den folgenden Block

<div>
	text
</div>

Lasst uns ihn anzeigen oder ausblenden basierend auf einer Bedingung:

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

Erstellen wir nun zwei Buttons. Beim Klick auf den ersten wird unser Block angezeigt, und beim Klick auf den zweiten - ausgeblendet:

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

Fügen wir der Komponentenklasse eine Eigenschaft hinzu, die reguliert, ob der Block angezeigt wird oder nicht:

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

Und nun schreiben wir die Implementierung unserer Methoden zum Anzeigen und Ausblenden des Blocks:

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

Erstellen Sie einen Button, dessen Klick den Block umschaltet: anzeigen, wenn er versteckt ist, und ausblenden, wenn er angezeigt wird.