Directiva if en Angular

En Angular se puede hacer que una etiqueta se muestre u oculte dependiendo del valor de una variable. Para ello se aplica la directiva especial *ngIf. Veamos cómo trabajar con ella.

Para empezar, esta directiva debe importarse:

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

Y agregarla en la sección de imports en el decorador:

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

Supongamos ahora que tenemos la siguiente variable:

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

Hagamos un div que se mostrará si esta variable tiene el valor true:

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

Y ahora hagamos que el div se muestre si nuestra variable tiene el valor false:

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