Diretiva if no Angular

No Angular, é possível fazer com que uma tag seja exibida ou ocultada dependendo do valor de uma variável. Para isso, aplica-se uma diretiva especial *ngIf. Vamos ver como trabalhar com ela.

Para começar, esta diretiva precisa ser importada:

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

E adicioná-la na seção de imports no decorador:

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

Suponha que agora temos a seguinte variável:

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

Vamos criar um div que será exibido se esta variável tiver o valor true:

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

E agora vamos fazer com que o div seja exibido se nossa variável tiver o valor false:

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