Aula 04: Diretivas 🛠️

Manipulando o HTML com Propriedade

São instruções que o Angular usa para mudar o DOM.

Identificadas pelo asterisco *.

Exibe ou remove elementos baseado em uma condição booleana.

<p *ngIf="isLoggedIn">Bem-vindo!</p>

O loop do Angular.

<ul>
  <li *ngFor="let curso of listaCursos">
    {{ curso }}
  </li>
</ul>

Adiciona classes CSS dinamicamente.

<div [ngClass]="{ 'active': isActive }">...</div>

Aplica estilos inline dinamicamente.

<p [ngStyle]="{ 'color': isAdmin ? 'red' : 'blue' }">
  Mensagem
</p>

Nunca use duas diretivas estruturais no mesmo elemento!

Errado: <li *ngIf="cond" *ngFor="let item of lista">

Você pode criar as suas próprias!

ng generate directive minha-diretiva

Vamos criar uma lista dinâmica de tarefas com filtros de "concluído"!