რეაქტიულობა პირობებში Angular-ში

რეაქტიულობა ასევე იმუშავებს პირობებთან ngIf. ეს ნიშნავს, რომ ჩვენ შეგვიძლია გამოვაჩინოთ ან დავამალოთ ბლოკი იმის მიხედვით, რა ჩაწერილია კლასის თვისებაში.

შევეცადოთ პრაქტიკაში. მოდით, გვქონდეს შემდეგი ბლოკი

<div>
	text
</div>

მოდით, გამოვაჩინოთ ან დავამალოთ ის პირობის მიხედვით:

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

ახლა გავაკეთოთ ორი ღილაკი. პირველზე დაწკაპუნებით გამოვაჩინოთ ჩვენი ბლოკი, ხოლო მეორეზე დაწკაპუნებით - დავამალოთ:

<button (click)="show()">
	გამოჩენა
</button>
<button (click)="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;
	}
}

გააკეთეთ ღილაკი, რომლის დაჭერაც აქტიურებს ბლოკს: გამოაჩენს, თუ ის დამალულია, და დაამალავს, თუ ის ჩანს.