🟢 Proyección

Información

En Angular, la proyección de contenido es una técnica poderosa para crear componentes altamente personalizables. Utilizar y comprender los conceptos de ng-content y ngTemplateOutlet puede mejorar significativamente su capacidad para crear componentes reutilizables.

Puedes aprender todo sobre ng-content aquí desde la proyección simple hasta las más complejas.

Para aprender sobre ngTemplateOutlet, puedes encontrar la documentación de la API aquí junto con algunos ejemplos básicos.

Con estas dos herramientas en la mano, ahora estás listo para asumir el desafío.

Declaración

Comenzarás con una aplicación completamente funcional que incluye un tablero con una tarjeta de profesor y una tarjeta de estudiante. El objetivo es implementar la tarjeta de la ciudad.

Aunque la aplicación funciona, la experiencia del desarrollador está lejos de ser óptima. Cada vez que necesitas implementar una nueva tarjeta, tienes que modificar el card.component.ts. En proyectos reales, este componente puede ser compartido entre muchas aplicaciones. El objetivo del desafío es crear un CardComponent que se pueda personalizar sin ninguna modificación. Una vez que hayas creado este componente, puedes comenzar a implementar el CityCardComponent y asegurarte de que no estás tocando el CardComponent.

Restricciones

• Debes refactorizar el CardComponent and ListItemComponent.
• La directiva NgFor debe ser declarada y permanecer dentro del CardComponent. Puedes sentirte tentado a moverla al ParentCardComponent como TeacherCardComponent.
• CardComponent no debe contener ningún NgIf o NgSwitch.
• CSS: intenta evitar usar ::ng-deep. Encuentra una mejor manera de manejar los estilos de CSS.