Angular-da şertleriň reaksiýalygy

Reaksiýalyk şertler bilen hem işleýär ngIf. Bu bizifiň klas düzümindäki hasiýete baglylykda blok görkezmegi ýa-da gizlemegi aňladýar.

Geliň amaly işde synaýaly. Bizifiň aşakdaky blogy bolsun

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

Geliň ony şert boýunça görkezeliň ýa-da gizleýeliň:

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

Indi iki düwmýany düzeliň. Birinjisine basanda blogymyzy görkezeris, ikinjisine basanda bolsa gizleris:

app/app.component.html<button (click)="show()">
  görkez
</button>
<button (click)="hide()">
  gizle
</button>

Komponent klasyna blog görkezilýär ýa-da gizlenýär diýen hasiýet goşalyň:

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

Indi blogy görkezmek we gizlemek üçin metodlarymyzy amala aşyralyň:

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