Reactivitatea condițiilor în Angular

Reactivitatea va funcționa și cu condițiile ngIf. Aceasta înseamnă că putem afișa sau ascunde un bloc în funcție de conținutul proprietății clasei.

Să încercăm în practică. Să presupunem că avem următorul bloc

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

Să îl afișăm sau să îl ascundem după o condiție:

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

Să creăm acum două butoane. La click pe primul vom afișa blocul nostru, iar la click pe al doilea - îl vom ascunde:

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

Să adăugăm în clasa componentei o proprietate care va regla dacă blocul este afișat sau nu:

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

Și acum să scriem implementarea metodelor noastre pentru afișarea și ascunderea blocului:

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