ngAfterContentInit for projected content in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is ngAfterContentInit in Angular?

ngAfterContentInit is a lifecycle hook that runs once after Angular projects external content into the component's view. It lets you act when the projected content is ready.

beginner

When exactly does ngAfterContentInit run in relation to content projection?

It runs after Angular inserts the external content inside <ng-content> tags but before the view is fully rendered.

intermediate

How do you access projected content inside ngAfterContentInit?

You use @ContentChild or @ContentChildren decorators to get references to the projected elements, then use them inside ngAfterContentInit.

intermediate

Why can't you access projected content in the constructor or ngOnInit?

Because the projected content is not yet inserted into the component at those stages. ngAfterContentInit waits until projection is done.

intermediate

Give a simple example of using ngAfterContentInit to log projected content.

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

export class MyComponent implements AfterContentInit {
  @ContentChild('projected') projectedContent!: ElementRef;

  ngAfterContentInit() {
    console.log('Projected content:', this.projectedContent.nativeElement.textContent);
  }
}</pre>

When does ngAfterContentInit run in Angular?

A After projected content is inserted

B Before constructor runs

C Before <code>ngOnInit</code>

D After view is fully rendered

ngAfterContentInit runs after Angular inserts projected content but before the full view render.

Which decorator is used to access projected content inside ngAfterContentInit?

A @ViewChild

B @ContentChild

C @Input

D @Output

@ContentChild accesses projected content, while @ViewChild accesses view elements.

Why can't you access projected content in ngOnInit?

A Because <code>ngOnInit</code> is deprecated

B Angular forbids it

C It causes errors

D Content is not projected yet

Projected content is inserted after ngOnInit, so it is not available yet.

What Angular tag is used to mark where content is projected?

A <ng-template>

B <ng-container>

C <ng-content>

D <ng-project>

<ng-content> marks where external content is inserted.

Which lifecycle hook runs after ngAfterContentInit?

A ngAfterContentChecked

B ngOnDestroy

C ngOnChanges

D ngAfterViewInit

ngAfterContentChecked runs after ngAfterContentInit to check projected content changes.

Explain the purpose of ngAfterContentInit and how it relates to projected content in Angular.

Think about when Angular inserts external content into your component.

Describe how you would use ngAfterContentInit to interact with content passed from a parent component.

Focus on accessing and using the projected content.