🟢 Projeção

Informação

Em Angular, projeção de conteúdo é uma técnica robusta para criar componente altamente personalizados. Usar e entender os conceitos do ng-content e ngTemplateOutlet pode melhorar significativamente sua habilidade na criação de componentes compartilháveis.

Você pode aprender tudo sobre ng-content aqui, desde projeção simples até casos mais complexos.

Para aprender sobre ngTemplateOutlet, você pode acessar a documentação aqui junto a alguns exemplos básicos.

Com essas duas ferramentas em mãos, você está pronto para realizar o desafio.

Declaração

Você começará com uma aplicação totalmente funcional que inclui um dashboard, que possui um cartão de professor e de estudante. O objetivo é implementar o cartão de cidade.

Apesar da aplicação funcionar, a experiência do desenvolvedor (DX) está nem um pouco otimizada. Toda vez que você precisar implementar um novo cartão, você terá que modificar o card.component.ts. Em projetos reais, esse componente pode ser compartilhado entre várias aplicações. O objetivo do desafio é criar um CardComponent que possa ser personalizado sem nenhuma modificação. Uma vez criado o componente, você pode começar a implementar o CityCardComponent e assegurar que não mexerá no CardComponent.

Restrições

• Você deve refatorar o CardComponent e ListItemComponent.
• A diretiva NgFor deve ser declarada e permanecer dentro do CardComponent. Você pode ficar instigado em querer mover ela para o ParentCardComponent como TeacherCardComponent.
• CardComponent não deve conter nenhum NgIf ou NgSwitch.
• CSS: tente evitar usar ::ng-deep. Ache uma maneira melhor para lidar com o CSS.

Desafios Bônus

• Tente trabalhar com a nova sintaxe nativa de controle de fluxo para laços e condicionais (documentação aqui)
• Usa a signal API para gerenciar o estado de seus componentes (documentação aqui)
• Para referenciar o template, use uma diretiva ao invés de strings mágicas