@ContentChild and content projection in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is content projection in Angular?

Content projection lets you insert content from a parent component into a child component's template. It helps create reusable components that can display different content.

beginner

What does the @ContentChild decorator do in Angular?

@ContentChild finds a child element or directive inside the projected content of a component. It lets the component access and interact with that projected content.

intermediate

How do you use @ContentChild to get a reference to a projected element?

You add @ContentChild with a selector (like a template reference variable or a component/directive type) in the child component class. Angular sets that property to the matching projected element.

intermediate

Why is @ContentChild different from @ViewChild?

@ContentChild looks inside the content projected into the component (between its tags). @ViewChild looks inside the component's own template.

intermediate

When is the @ContentChild property available during the component lifecycle?

The @ContentChild property is available after Angular runs the ngAfterContentInit lifecycle hook. Before that, it might be undefined.

What does content projection allow you to do in Angular?

A Run code after the view initializes

B Insert external content into a child component's template

C Create new Angular modules

D Change the component's CSS styles dynamically

Content projection lets you insert content from a parent into a child component's template.

Which decorator lets you access projected content inside a component?

A @ContentChild

B @ViewChild

C @Input

D @Output

@ContentChild accesses elements inside projected content.

When is the @ContentChild property guaranteed to be set?

A ngOnInit

B ngAfterViewInit

C ngOnDestroy

D ngAfterContentInit

@ContentChild is set after ngAfterContentInit lifecycle hook.

What is the main difference between @ContentChild and @ViewChild?

A @ContentChild accesses projected content; @ViewChild accesses component's own template

B @ContentChild accesses inputs; @ViewChild accesses outputs

C @ContentChild is for services; @ViewChild is for directives

D They are exactly the same

@ContentChild looks inside projected content; @ViewChild looks inside the component template.

How do you select an element with @ContentChild?

A By CSS selector only

B By HTML tag name only

C By template reference variable or directive/component type

D By event binding

@ContentChild can select by template reference variable or directive/component type.

Explain how @ContentChild works with content projection in Angular.

Think about how a component can see content passed inside its tags.

Describe a simple example scenario where you would use @ContentChild with content projection.

Imagine a reusable panel component that needs to control a button passed inside it.

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