LuanDantas
3/2/2018 - 11:48 AM

Diretivas (If - *ngIf)

Diretivas (If - *ngIf)

Funciona como o if da programação convencional, porém a diretiva *ngIf não contém um else.

<divc *ngIf="cursos.lenght > 0">
    Lista de cursos:    
</div>

No exemplo acima, a div somente será exibida caso o nosso array de cursos contenha algum elemento.

export class DiretivaNgIfComponent implements OnInit {
    cursos: string[] = [];
}
  • OBS: Como a nossa diretiva *ngIf manipula diretamente o DOM, devemos utilizá-la com cuidado, pois se usada de forma errada, poderemos comprometer a performance da aplicação.
  • Uma alternativa para isso, seja utilizar da Property Binding "hidden", propriedade do próprio HTML 5.
<divc [hidden]="cursos.lenght > 0">
    Lista de cursos:    
</div>

O comportamento será o mesmo, porém, poupando o DOM de ser modificado.