Αντίδραση Προϋποθέσεων στο 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>

Ας προσθέσουμε στην κλάση του component μια ιδιότητα που θα ρυθμίζει εάν το μπλοκ είναι ορατό ή όχι:

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;
  }
}