🟢 Projection

Information

Dans Angular, la projection de contenu est une technique puissante pour créer des composants hautement personnalisables. Utiliser et comprendre les concepts liés aux ng-content et ngTemplateOutlet peut grandement améliorer votre capacité à créer des composants réutilisables.

Vous pouvez tout apprendre sur ng-content ici, de la projection de contenu la plus simple jusqu’à des utilisations plus complexes.

Pour en savoir plus sur ngTemplateOutlet, vous pouvez trouver la documentation de l’API ici avec quelques exemples de base.

Avec ces deux outils en main, vous êtes maintenant prêt à relever le défi.

Énoncé

Vous commencerez avec une application entièrement fonctionnelle qui comprend un tableau de bord contenant une carte pour les enseignants et une carte pour les élèves. L’objectif est de mettre en place la carte de la ville.

Bien que l’application fonctionne, l’expérience développeur est loin d’être optimale. Chaque fois que vous devez implémenter une nouvelle carte, vous devez modifier le card.component.ts. Dans des projets réels, ce composant pourrait être partagé entre de nombreuses applications. Le but du défi est de créer un CardComponent qui peut être personnalisé sans aucune modification. Une fois que vous aurez créé ce composant, vous pourrez commencer à implémenter le CityCardComponent et vous assurer de ne pas toucher au CardComponent.

Contraintes

• Vous devez refactoriser le CardComponent et le ListItemComponent.
• La boucle @for doit être déclarée et rester à l’intérieur du CardComponent. Vous pourriez être tenté de la déplacer dans le ParentCardComponent comme TeacherCardComponent.
• Le composant CardComponent ne doit contenir aucune condition.
• CSS: essayez d’éviter d’utiliser ::ng-deep. Trouvez un meilleur moyen de gérer le style CSS.

Challenges Bonus

• Utilisez l’API des signals pour gérer l’état de vos composants (documentation ici)
• Pour référencer le template, utilisez une directive au lieu d’une magic string (Qu’est-ce qui pose problème avec les magic string ?)