Angular'da Koşulların Reaktivitesi

Reaktivite, ngIf koşullarıyla da çalışacaktır. Bu, bir bloğu sınıf özelliğinde ne olduğuna bağlı olarak gösterebileceğimiz veya gizleyebileceğimiz anlamına gelir.

Pratikte deneyelim. Aşağıdaki bloğa sahip olduğumuzu varsayalım

<div>
	text
</div>

Onu bir koşula bağlı olarak gösterelim veya gizleyelim:

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

Şimdi iki buton yapalım. Birinciye tıklandığında bloğumuzu gösterelim, ikinciye tıklandığında ise gizleyelim:

<button (click)="show()">
	göster
</button>
<button (click)="hide()">
	gizle
</button>

Bileşen sınıfına, bloğun gösterilip gösterilmediğini düzenleyecek bir özellik ekleyelim:

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

Şimdi bloğu gösterme ve gizleme metodlarımızın gerçekleştirimini yazalım:

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

Bloğu gizliyse gösterecek, gösteriliyse gizleyecek bir buton yapın.