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

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

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

app/app.component.html<div>
  text
</div>

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

app/app.component.html<div *ngIf="isShow">
  text
</div>

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

app/app.component.html<button (click)="show()">
  გამოჩენა
</button>
<button (click)="hide()">
  დამალვა
</button>

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

app/app.component.tsexport class AppComponent {
  public isShow: boolean = true;
}

ახლა დავწეროთ ჩვენი მეთოდების რეალიზაცია ბლოკის გამოსაჩენად და დასამალად:

app/app.component.tsexport class AppComponent {
  public isShow: boolean = true;
  
  public show(): void {
    this.isShow = true;
  }
  public hide(): void {
    this.isShow = false;
  }
}