@ContentChild and content projection in Angular

Introduction

@ContentChild helps you get a reference to something passed inside your component from outside. Content projection lets you put any content inside your component's tag, like putting a photo inside a frame.

You want to access or control a part of the content someone puts inside your component.

You build a reusable component that can show different content inside it.

You want to style or interact with projected content from the parent component.

You need to call a method or read a property of a child element projected inside your component.

Syntax

Angular

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

@Component({
  selector: 'my-frame',
  template: `<ng-content></ng-content>`
})
export class MyFrameComponent implements AfterContentInit {
  @ContentChild('insideRef') insideElement!: ElementRef;

  ngAfterContentInit() {
    // use insideElement here
  }
}

@ContentChild looks for a child element or directive inside the projected content.

Use ngAfterContentInit lifecycle hook to safely access the projected content reference.

Examples

Here, the paragraph has a template reference #insideRef that @ContentChild can find.

Angular

<my-frame>
  <p #insideRef>This is inside content</p>
</my-frame>

This gets the element with the template reference #insideRef inside the projected content.

Angular

@ContentChild('insideRef') insideElement: ElementRef;

This tag is where the projected content will appear inside your component's template.

Angular

<ng-content></ng-content>

Sample Program

This example shows a MyFrameComponent that projects any content inside a blue border box. It uses @ContentChild to get the paragraph inside and logs its text after content initializes.

Angular

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

@Component({
  selector: 'my-frame',
  template: `
    <div style="border: 2px solid blue; padding: 1rem;">
      <h3>Frame Component</h3>
      <ng-content></ng-content>
    </div>
  `
})
export class MyFrameComponent implements AfterContentInit {
  @ContentChild('insideRef') insideElement!: ElementRef;

  ngAfterContentInit() {
    console.log('Projected content text:', this.insideElement.nativeElement.textContent.trim());
  }
}

@Component({
  selector: 'app-root',
  template: `
    <my-frame>
      <p #insideRef>This text is projected inside the frame.</p>
    </my-frame>
  `
})
export class AppComponent {}

Important Notes

Always use ngAfterContentInit to access @ContentChild because the content is not ready before that.

If the projected content changes dynamically, consider using @ContentChildren or other strategies.

Content projection keeps your component flexible and reusable by letting others decide what to put inside.

Summary

@ContentChild gets a reference to a single element inside projected content.

Content projection lets you insert any content inside your component's tag using <ng-content>.

Use ngAfterContentInit to safely work with projected content references.