Reaktiviteti i Kushteve në Angular

Reaktiviteti do të funksionojë gjithashtu me kushtet ngIf. Kjo do të thotë se ne mundemi të shfaqim ose fshehim një bllok në varësi nga ajo që përmban në vetinë e klasës.

Le të provojmë në praktikë. Le të themi se kemi bllokun e mëposhtëm

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

Le ta shfaqim ose fshehim atë sipas kushtit:

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

Të krijojmë tani dy butona. Me klikim në të parën do ta shfaqim bllokun tonë, ndërsa me klikim në të dytën - do ta fshehim:

app/app.component.html<button (click)="show()">
  show
</button>
<button (click)="hide()">
  hide
</button>

Le të shtojmë në klasën e komponentit një veti që do të rregullojë nëse blloku është i shfaqur apo jo:

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

Dhe tani le të shkruajmë implementimin e metodave tona për shfaqjen dhe fshehjen e bllokut:

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