Você está aprendendo
Ver documentação
Mergulhando nas diretivas estruturais do Angular
Objetivo: 3 acertos
Prêmio: 1 conquista de Angular
Progresso atual:
Olá, bem vindo a sala Introdução as diretivas estruturais de Angular
Esta sala possui um pré-requisito recomendado
Clique no botão abaixo, desbloqueie conteúdos, exercícios e conquiste essa sala.
Obrigado pelo seu feedback.
Esta sala possui um pré-requisito recomendado
Conteúdo da sala
Sala
Documentação
Angular: Introdução as diretivas estruturais

Podemos utilizar as diretivas estruturais do Angular para separar completamente a lógica e os dados da aplicação, escritos em TypeScript, da lógica de exibição, escrita de forma declarativa no template HTML do componente.

Dessa forma, quando utilizamos o Angular, não misturamos o JavaScript com o HTML, algo muito comum quando desenvolvemos com JavaScript puro.

Características:

  • Separa a lógica de controle da lógica de exibição do componente
  • Replica um elemento HTML na interface de forma dinâmica
  • Pode verificar diversas condições de uma única vez.

Exemplo de código

//container recebe uma diretiva estrutural, contudo não é renderizado no HTML
<ng-container *ngFor="let dia of diasDaSemana">
// Na coleção contento os dias da semana, queremos exibir apenas o dia atual
    <div *ngIf="dia == hoje">
        {{ dia }}
    </div>
</ng-container>

O que eu preciso aprender?