@ContentChild and content projection in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will be rendered by this Angular component?

Consider the following Angular component using content projection and @ContentChild. What will be displayed inside the component?

Angular

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

@Component({
  selector: 'app-wrapper',
  template: `<div>Wrapper Start</div><ng-content></ng-content><div>Wrapper End</div>`
})
export class WrapperComponent implements AfterContentInit {
  @ContentChild('projected') projectedContent!: ElementRef;

  ngAfterContentInit() {
    if (this.projectedContent) {
      this.projectedContent.nativeElement.textContent += ' (modified)';
    }
  }
}

// Usage in parent template:
// <app-wrapper>
//   <p #projected>Hello World</p>
// </app-wrapper>

A Wrapper Start Hello World (modified) Wrapper End

B Wrapper Start Hello World Wrapper End

C Wrapper Start Wrapper End

D Wrapper Start <p #projected>Hello World</p> Wrapper End

💡 Hint

Think about when ngAfterContentInit runs and what @ContentChild does with the template reference.

The @ContentChild('projected') decorator finds the element with the template reference #projected inside the content projected into <ng-content>. The ngAfterContentInit lifecycle hook runs after the content is projected, allowing modification of the projected element's text. So the paragraph text is changed to "Hello World (modified)" before rendering.

❓ lifecycle

intermediate

When is @ContentChild available in Angular component lifecycle?

In which lifecycle hook is the @ContentChild property guaranteed to be initialized and safe to use?

A ngOnInit

B ngAfterViewChecked

C ngAfterContentInit

D ngAfterViewInit

💡 Hint

Think about when Angular finishes projecting external content into the component.

The @ContentChild references elements projected into the component's <ng-content>. These are not available during ngOnInit. Angular sets them after content projection is done, which happens before ngAfterContentInit. So this hook is the first safe place to access @ContentChild.

📝 Syntax

advanced

Which @ContentChild selector correctly selects a projected component instance?

Given a child component <child-comp> projected into a parent, which @ContentChild decorator correctly selects the child component instance?

Angular

import { Component, ContentChild } from '@angular/core';
import { ChildComp } from './child-comp.component';

@Component({ selector: 'parent-comp', template: `<ng-content></ng-content>` })
export class ParentComp {
  // Which @ContentChild is correct?
}

A @ContentChild(ChildComp) child!: ChildComp;

B @ContentChild('ChildComp') child!: ChildComp;

C @ContentChild('.child-comp') child!: ChildComp;

D @ContentChild('childComp') child!: ChildComp;

💡 Hint

Think about how to select a component class type with @ContentChild.

The @ContentChild decorator can take a component class type to select the first projected instance of that component. Using the class ChildComp directly is correct. Using a string selector or CSS class name does not select the component instance.

🔧 Debug

advanced

Why does @ContentChild return undefined in this scenario?

A developer uses @ContentChild to get a projected element but finds it is undefined in ngAfterContentInit. What is the most likely cause?

Angular

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

@Component({
  selector: 'app-wrapper',
  template: `<ng-content></ng-content>`
})
export class WrapperComponent implements AfterContentInit {
  @ContentChild('proj') proj!: ElementRef;

  ngAfterContentInit() {
    console.log(this.proj);
  }
}

// Usage:
// <app-wrapper>
//   <p>Hello</p>
// </app-wrapper>

A ngAfterContentInit runs before content projection happens.

B The projected element does not have the template reference variable #proj.

C @ContentChild only works with components, not native elements.

D The selector string in @ContentChild must be a CSS class, not a template reference.

💡 Hint

Check the template reference variable usage in the projected content.

The @ContentChild('proj') looks for an element with #proj inside the projected content. If the projected paragraph does not have #proj, the query returns undefined. The other options are incorrect because ngAfterContentInit runs after projection, @ContentChild works with native elements, and the selector can be a template reference string.

🧠 Conceptual

expert

How does @ContentChild differ from @ViewChild in Angular?

Which statement best describes the difference between @ContentChild and @ViewChild in Angular?

A @ContentChild selects child components only, while @ViewChild selects native HTML elements only.

B @ContentChild and @ViewChild are interchangeable and select elements from the same template.

C @ContentChild works only after ngAfterViewInit, while @ViewChild works after ngAfterContentInit.

D @ContentChild selects elements projected into the component via <ng-content>, while @ViewChild selects elements declared inside the component's own template.

💡 Hint

Think about where the elements come from that each decorator queries.

@ContentChild queries elements that are projected into the component from outside via <ng-content>. @ViewChild queries elements that are declared inside the component's own template. They serve different purposes and are not interchangeable.