Անգուլարում պայմանների ռեակտիվություն

Ռեակտիվությունը նաև կաշխատի ngIf պայմանների հետ: Սա նշանակում է, որ մենք կարող ենք ցույց տալ կամ թաքցնել բլոկը՝ կախված նրանից, թե ինչ է պարունակվում դասի հատկության մեջ:

Եկեք փորձենք գործնականում: Ենթադրենք, որ մենք ունենք հետևյալ բլոկը

app/app.component.html<div>
  տեքստ
</div>

Եկեք այն ցույց տանք կամ թաքցնենք ըստ պայմանի:

app/app.component.html<div *ngIf="isShow">
  տեքստ
</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;
  }
}