Nosacījumu reaktivitāte Angular

Reaktivitāte darbosies arī ar nosacījumiem ngIf. Tas nozīmē, ka mēs varam rādīt vai slēpt bloku atkarībā no tā, kas atrodas klases īpašībā.

Izmēģināsim praksē. Pieņemsim, ka mums ir šāds bloks

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

Rādīsim vai slēpsim to atkarībā no nosacījuma:

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

Izveidosim divas pogas. Noklikšķinot uz pirmās, mēs rādīsim mūsu bloku, bet, noklikšķinot uz otrās - slēpsim to:

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

Pievienosim komponenta klasei īpašību, kas regulēs, vai bloks ir redzams vai nē:

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

Un tagad uzrakstīsim mūsu metožu implementāciju bloka rādīšanai un slēpšanai:

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