Sala - Introdução as diretivas estruturais

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

Para fazer parte desta sala é necessário estar logado Clique no botão abaixo, desbloqueie conteúdos, exercícios e conquiste essa sala.

Comunidade Acessar comunidade

Programadores nesta sala

525

Útimos que acertaram

Obrigado pelo seu feedback.

Esta sala possui um pré-requisito recomendado

Para fazer parte desta sala é necessário ser um assinante

Conteúdo da sala

Sala Introdução aos templates de componentes

Acessar

Faz parte da competência Front-End

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?

Características:

Exemplo de código

O que eu preciso aprender?

Fonte de estudo:

Código de exemplo:

Pré-requisito: