ngAfterContentInit for projected content in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

When is ngAfterContentInit called in Angular?

Consider a component that uses content projection with <ng-content>. When does Angular call the ngAfterContentInit lifecycle hook?

A Before the projected content is initialized but after the component's view is ready.

B Immediately after the component's constructor runs.

C After the component's own view and all projected content have been initialized.

D Only after the component's view is fully initialized, ignoring projected content.

💡 Hint

Think about when Angular finishes setting up both the component's template and the content passed inside it.

The ngAfterContentInit hook runs once after Angular projects external content into the component and initializes it. This means it waits for both the component's own view and any projected content to be ready.

❓ state_output

intermediate

What will be logged by ngAfterContentInit?

Given this Angular component and usage, what will the console log inside ngAfterContentInit?

Angular

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

@Component({
  selector: 'child-comp',
  template: `<ng-content></ng-content>`
})
export class ChildComp implements AfterContentInit {
  @ContentChild('projected') projectedContent!: ElementRef;

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

// Usage in parent template:
// <child-comp><p #projected>Hello Angular</p></child-comp>

A "<p #projected>Hello Angular</p>"

B "Hello Angular"

C Error: Cannot read property 'nativeElement' of undefined

D undefined

💡 Hint

The @ContentChild decorator finds the element inside projected content after content init.

The @ContentChild decorator references the element with template reference #projected inside the projected content. By ngAfterContentInit, this element is available, so logging its text content outputs "Hello Angular".

📝 Syntax

advanced

Identify the correct ngAfterContentInit implementation

Which of the following ngAfterContentInit method implementations correctly logs the number of projected items using @ContentChildren?

Angular

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

@Component({
  selector: 'list-comp',
  template: `<ng-content></ng-content>`
})
export class ListComp implements AfterContentInit {
  @ContentChildren('item') items!: QueryList<ElementRef>;

  ngAfterContentInit() {
    // ???
  }
}

A console.log(this.items.length);

B console.log(this.items.count);

C console.log(this.items.toArray().length);

D console.log(this.items.size);

💡 Hint

QueryList has a length property directly to get the number of items.

QueryList has a length property that returns the current number of matched items. Use console.log(this.items.length) inside ngAfterContentInit.

🔧 Debug

advanced

Why does @ContentChild return undefined in ngAfterContentInit?

A developer uses @ContentChild('proj') to get a projected element but finds it undefined inside ngAfterContentInit. What is the most likely cause?

Angular

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

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

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

// Usage:
// <proj-comp><div>Content without #proj</div></proj-comp>

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

B ngAfterContentInit runs before content projection is done.

C The component should use @ViewChild instead of @ContentChild.

D The ElementRef type is incorrect for projected content.

💡 Hint

Check if the projected element has the exact template reference variable used in @ContentChild.

@ContentChild('proj') looks for an element with #proj inside the projected content. If the projected element lacks this reference, the property will be undefined.

🧠 Conceptual

expert

How does Angular handle multiple ngAfterContentInit hooks in nested components with projection?

Consider a parent component projecting content into a child component, which itself projects content into a grandchild component. Which statement best describes the order and behavior of ngAfterContentInit hooks in this nested projection scenario?

A Angular calls <code>ngAfterContentInit</code> only on the top-level component that contains the projection.

B Angular calls <code>ngAfterContentInit</code> from the deepest projected component first, then bubbles up to parents.

C Angular calls <code>ngAfterContentInit</code> on each component only after all projected content in the entire nested tree is initialized.

D Angular calls <code>ngAfterContentInit</code> on each component immediately after its own projected content is initialized, starting from the top-level parent down to the deepest child.

💡 Hint

Think about how Angular initializes content projection step by step in nested components.

Angular calls ngAfterContentInit on each component after its own projected content is initialized. This happens top-down: the parent component's hook runs after its content is ready, then the child component's hook runs after its own projected content is ready, and so on.