Angular Fundamentals: Reusing Components with Content Projection
Welcome back to this review of the Pluralsight course Angular Fundamentals by Jim Cooper and Joe Eames. Excluding the 2 minute course overview, there are 16 modules in this course and we have reached the 8th module: Reusing Components with Content Projection. This is another short module at on 13 minutes and 19 seconds.
The previous modules are:
- Getting Started With Angular
- Creating and Communicating Between Angular Components
- Exploring the Angular Syntax
- Creating Reusable Angular Services
- Routing and Navigating Pages
- Collecting Data with Angular Forms and Validation
- Communicating Between Components
The previous modules were narrated by Jim Cooper, and in this module Joe Eames takes over from where Jim left off.
The Angular Fundamentals course is an intermediate level course and is the 5th course on the Angular Learning Path.
Content Projection
This is a feature where we have a component with a visual wrapper (e.g. dialog box), and the content within this wrapper (e.g. cancel and save buttons) is decided by the developer.
Joe shows us the session list that’s associated with the “Angular Connect” conference, and says he’d like each session item to be collapsible.
We start with the session-list component, which contains a div with the Bootstrap class well (this has been dropped in favor of a new card component in the latest version Bootstrap) and create a new collapsible-well.component.ts in the project’s common directory.
As is always the case when creating new components, remember to import it and add it to your module’s declarations array.
Multiple Slot Content Projection
Joe wants to indicate the most popular sessions with a new “on fire” icon beside the title. This is achieved using the ngIf directive, and by creating another ng-content tag in the template.
Joe prefers using attributes over CSS class names, but we see examples of both techniques here.
The next module in this course is Displaying Data with Pipes.
