13 - Diretivas customizadas

Olá pessoal, na décima terceira aula do treinamento de Angular 20! Nessa aula, vamos aprender a criar nossas próprias diretivas.

Vamos começar! Crie um componente: ng g c diretiva-customizada.

Agora podemos criar a estrutura da nossa diretiva customizada: ng g d minha-diretiva/apresentacao. A letra d significa directive.

Abra o arquivo apresentacao.ts, implemente o seguinte código:

Agora no arquivo TS do nosso componente, importe a diretiva criada: imports: [ApresentacaoDirective].

No arquivo HTML do componente: < h1 [apresentacao]="'Ana'">< /h1>, o retorno será: Olá Ana!

Acomapanhe o vídeo abaixo para implementar os passos utilizados nessa etapa do treinamento: