Angular-da şertleriň reaksiýalygy

Reaksiýalyk şertler bilen hem işleýär ngIf. Bu bizifiň klas düzümindäki hasiýete baglylykda blok görkezmegi ýa-da gizlemegi aňladýar.

Geliň amaly işde synaýaly. Bizifiň aşakdaky blogy bolsun

<div>
	text
</div>

Geliň ony şert boýunça görkezeliň ýa-da gizleýeliň:

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

Indi iki düwmýany düzeliň. Birinjisine basanda blogymyzy görkezeris, ikinjisine basanda bolsa gizleris:

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

Komponent klasyna blog görkezilýär ýa-da gizlenýär diýen hasiýet goşalyň:

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

Indi blogy görkezmek we gizlemek üçin metodlarymyzy amala aşyralyň:

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

Blogy açgytlaýan düwmýany düzüň: gizlenen bolsa görkezer, görkezilýän bolsa gizler.