Реактивност услова у Angular

Реактивност ће такође радити са условима 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;
  }
}