Η Διεύθυνση if στο Angular

Στο Angular, είναι δυνατό να κάνετε μια ετικέτα να εμφανίζεται ή να κρύβεται ανάλογα με την τιμή μιας μεταβλητής. Για αυτό χρησιμοποιείται η ειδική διεύθυνση *ngIf. Ας δούμε πώς να δουλέψουμε με αυτήν.

Αρχικά, αυτή η διεύθυνση πρέπει να εισαχθεί:

app/app.component.tsimport {NgIf} from "@angular/common";

Και να προστεθεί στο τμήμα εισαγωγών στον διακοσμητή:

app/app.component.ts@Component({
  .....
  imports: [....., NgIf],
  ....
})

Ας υποθέσουμε τώρα ότι έχουμε την ακόλουθη μεταβλητή:

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

Ας φτιάξουμε ένα div που θα εμφανίζεται, αν αυτή η μεταβλητή έχει την τιμή true:

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

Και τώρα ας κάνουμε το div να εμφανίζεται, αν η μεταβλητή μας έχει την τιμή false:

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