@ContentChild and content projection in Angular - Mini Project: Build & Apply

Using @ContentChild and Content Projection in Angular

📖 Scenario: You are building a reusable Angular card component that can display a title and some custom content inside it. The card should allow users to pass in their own content to be displayed inside the card body.

🎯 Goal: Create an Angular card component that uses @ContentChild to access a projected title element and display it inside the card header. The card body should display any other projected content.

📋 What You'll Learn

Create a card component with a template that has a header and a body section

Use content projection to allow users to pass a title element and body content

Use @ContentChild to get a reference to the projected title element

Display the title inside the card header using the @ContentChild reference

💡 Why This Matters

🌍 Real World

Reusable UI components often need to accept custom content from users. Content projection and @ContentChild let you build flexible components that adapt to user content.

💼 Career

Understanding content projection and @ContentChild is essential for Angular developers building modular and maintainable UI components.

1

Create the card component template with content projection slots

Create an Angular component template with a <div> for the card header and another <div> for the card body. Use <ng-content select=".card-title"></ng-content> inside the header to project the title, and <ng-content></ng-content> inside the body to project the rest of the content.

Angular

Need a hint?

Use <ng-content select=".card-title"></ng-content> to project the title element with class card-title inside the header.

2

Add a @ContentChild property to get the projected title element

In the card component TypeScript file, import ContentChild and ElementRef from @angular/core. Then create a property called titleElement decorated with @ContentChild that selects the element with the CSS selector ".card-title" and has type ElementRef<HTMLElement>.

Angular

import { Component, ContentChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-card',
  templateUrl: './card.component.html'
})
export class CardComponent {
  // Your code here
}

Need a hint?

Use @ContentChild('.card-title', { static: false }) to get the projected title element.

3

Use titleElement in the component to access the title content

Add a method called getTitleText() in the card component class that returns the text content of the titleElement native element. Use optional chaining to safely access nativeElement.textContent and return an empty string if not available.

Angular

import { Component, ContentChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-card',
  templateUrl: './card.component.html'
})
export class CardComponent {
  @ContentChild('.card-title', { static: false }) titleElement!: ElementRef;

  // Add getTitleText() method below
  // Your code here
}

Need a hint?

Use optional chaining ?. to safely access nativeElement.textContent.

4

Display the title text inside the card header using interpolation

Modify the card component template to display the title text inside the header using interpolation with {{ getTitleText() }}. Remove the <ng-content select=".card-title"></ng-content> from the header since the title text is now accessed via @ContentChild.

Angular

  
    
  
  
    
  


// Your code here

Need a hint?

Use interpolation {{ getTitleText() }} inside the header div to show the title text.