Uwiano wa Masharti katika Angular

Uwiano pia utafanya kazi na masharti ngIf. Hii inamaanisha kuwa tunaweza kuonyesha au kuficha kizuizi kulingana na kile kilicho kwenye sifa ya darasa.

Tujaribu kwa vitendo. Hebu tuwe na kizuizi kifuatacho

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

Wacha tuonyeshe au tufiche kulingana na sharti:

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

Tufanye vitufe viwili sasa. Kwa kubofya kwa kwanza tuonyeshe kizuizi chetu, na kwa kubofya kwa pili - tufiche:

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

Tuongeze kwenye darasa la sehemu sifa ambayo itaweka kanuni ya kama kizuizi kinaonyeshwa au la:

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

Na sasa tuandike utekelezaji wa mbinu zetu za kuonyesha na kuficha kizuizi:

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