@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.

Practice

1. What does the Angular decorator @ContentChild do in a component?

easy

A. It projects content from the component into its parent.

B. It creates a new child component inside the template.

C. It gets a reference to a single element inside the projected content.

D. It listens to events emitted by child components.

Solution

1. Step 1: Understand content projection

   Content projection allows inserting external content inside a component using <ng-content>.

2. Step 2: Role of @ContentChild

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

3. Final Answer:

   It gets a reference to a single element inside the projected content. -> Option C

4. Quick Check:

   @ContentChild = reference to projected element [OK]

Hint: Remember: @ContentChild targets projected content elements [OK]

Common Mistakes:

• Confusing @ContentChild with @ViewChild
• Thinking it creates new elements
• Assuming it projects content instead of referencing it

2. Which of the following is the correct syntax to use @ContentChild to get a reference to a template variable named myRef?

easy

A. @ContentChild('myRef') myElement!: ElementRef;

B. @ContentChild(myRef) myElement!: ElementRef;

C. @ContentChild(#myRef) myElement!: ElementRef;

D. @ContentChild(myRef, {static: true}) myElement!: ElementRef;

Solution

1. Step 1: Correct syntax for @ContentChild selector

   The selector must be a string matching the template variable name, so it should be quoted: 'myRef'.

2. Step 2: Static option usage

   Static option is optional and usually false by default; not required here.

3. Final Answer:

   @ContentChild('myRef') myElement!: ElementRef; -> Option A

4. Quick Check:

   Use quotes around template variable name in @ContentChild [OK]

Hint: Use quotes around template variable name in @ContentChild [OK]

Common Mistakes:

• Omitting quotes around the selector string
• Using # inside the selector string
• Confusing static option necessity

3. Given this component code:

@Component({ selector: 'child-comp', template: `` })
export class ChildComp {
  @ContentChild('proj') projElement!: ElementRef;

  ngAfterContentInit() {
    console.log(this.projElement.nativeElement.textContent);
  }
}

And usage:

Hello World

What will be logged to the console?

medium

A. Hello World

B. undefined

C. Error: projElement is undefined

D. Empty string

Solution

1. Step 1: Understand content projection and @ContentChild

   The <p #proj> is projected inside <ng-content>. @ContentChild('proj') gets its reference.

2. Step 2: ngAfterContentInit timing

   ngAfterContentInit runs after projected content is initialized, so projElement is defined and accessible.

3. Final Answer:

   Hello World -> Option A

4. Quick Check:

   Projected element text logged correctly [OK]

Hint: Use ngAfterContentInit to access projected content safely [OK]

Common Mistakes:

• Trying to access projElement before ngAfterContentInit
• Assuming @ContentChild does not find projected elements
• Confusing @ViewChild with @ContentChild

4. Consider this component code:

@Component({ selector: 'proj-comp', template: `` })
export class ProjComp {
  @ContentChild('item') itemRef!: ElementRef;

  ngOnInit() {
    console.log(this.itemRef.nativeElement.textContent);
  }
}

And usage:

Test

What problem will occur when running this code?

medium

A. Logs 'Test' correctly

B. Error because itemRef is undefined in ngOnInit

C. Syntax error due to missing decorator

D. Logs empty string

Solution

1. Step 1: Lifecycle hook timing for @ContentChild

   @ContentChild references are not available in ngOnInit; they become available in ngAfterContentInit.

2. Step 2: Accessing itemRef in ngOnInit

   Accessing itemRef in ngOnInit causes it to be undefined, leading to runtime error when accessing nativeElement.

3. Final Answer:

   Error because itemRef is undefined in ngOnInit -> Option B

4. Quick Check:

   Use ngAfterContentInit for @ContentChild access [OK]

Hint: Access @ContentChild only in ngAfterContentInit [OK]

Common Mistakes:

• Accessing @ContentChild in ngOnInit
• Assuming @ContentChild is available immediately
• Ignoring lifecycle hook order

5. You want to create a component that projects multiple paragraphs and highlights the first paragraph. Which approach correctly achieves this?

Options:
A) Use @ContentChildren('para') and highlight the first in the list.
B) Use @ContentChild('para') and add #para to the first paragraph only.
C) Use @ViewChild('para') inside the component template.
D) Use @ContentChild without a selector and highlight all paragraphs.

hard

A. Use @ContentChild without a selector and highlight all paragraphs.

B. Use @ContentChild('para') and add #para to the first paragraph only.

C. Use @ViewChild('para') inside the component template.

D. Use @ContentChildren('para') and highlight the first in the list.

Solution

1. Step 1: Understand multiple projected elements

   When projecting multiple elements with the same template variable, use @ContentChildren to get all references.

2. Step 2: Highlight the first paragraph

   @ContentChildren returns a QueryList; you can access the first element and apply highlight logic.

3. Final Answer:

   Use @ContentChildren('para') and highlight the first in the list. -> Option D

4. Quick Check:

   Multiple projected elements need @ContentChildren [OK]

Hint: Use @ContentChildren for multiple projected elements [OK]

Common Mistakes:

• Using @ContentChild for multiple elements
• Using @ViewChild for projected content
• Omitting selector in @ContentChild