ngAfterContentInit for projected content in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the lifecycle interface for content initialization.

Angular

import { Component, [1] } from '@angular/core';

Drag options to blanks, or click blank then click option'

AAfterViewInit

BOnInit

CAfterContentInit

DOnChanges

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing OnInit instead of AfterContentInit

Confusing AfterViewInit with AfterContentInit

The AfterContentInit interface is used to detect when projected content has been initialized.

2fill in blank

medium

Complete the code to implement the lifecycle hook method that runs after content projection.

Angular

export class ChildComponent implements AfterContentInit {
  [1]() {
    console.log('Content initialized');
  }
}

Drag options to blanks, or click blank then click option'

AngOnInit

BngAfterViewInit

CngOnChanges

DngAfterContentInit

Attempts:

3 left

💡 Hint

Common Mistakes

Using ngOnInit which runs earlier

Using ngAfterViewInit which runs after view initialization

The method ngAfterContentInit runs after Angular projects external content into the component.

3fill in blank

hard

Fix the error in the lifecycle hook method name to correctly detect projected content initialization.

Angular

export class SampleComponent implements AfterContentInit {
  ngAfterContent[1]() {
    console.log('Projected content ready');
  }
}

Drag options to blanks, or click blank then click option'

AInit

BIniting

CInitz

DInited

Attempts:

3 left

💡 Hint

Common Mistakes

Adding extra letters after 'Init'

Misspelling the method name

The correct method name is ngAfterContentInit exactly, with 'Init' at the end.

4fill in blank

hard

Fill both blanks to correctly use @ContentChild and detect when projected content is initialized.

Angular

import { Component, AfterContentInit, [1] } from '@angular/core';

@Component({
  selector: 'child-comp',
  template: '<ng-content></ng-content>'
})
export class ChildComponent implements AfterContentInit {
  @[2]('projectedRef') projectedElement: any;

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

Drag options to blanks, or click blank then click option'

AContentChild

BViewChild

CInput

DOutput

Attempts:

3 left

💡 Hint

Common Mistakes

Using @ViewChild instead of @ContentChild

Not importing ContentChild

The @ContentChild decorator is used to get a reference to projected content inside ngAfterContentInit.

5fill in blank

hard

Fill all three blanks to create a component that logs the text content of projected content after initialization.

Angular

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

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

  ngAfterContentInit() {
    console.log(this.content.nativeElement.[2]);
  }
}

Drag options to blanks, or click blank then click option'

AprojectedContent

BtextContent

CinnerText

DcontentChild

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong selector string in @ContentChild

Trying to access a property that does not exist on nativeElement

The selector string for @ContentChild matches the template reference name. The textContent or innerText property gets the text inside the element.