ngAfterContentInit vs ngAfterContentChecked in angular | Component Lifecycle hooks

Main ideas / concepts conveyed

Angular component lifecycle hooks (focused on projected content)

The video focuses on two lifecycle hooks:

• ngAfterContentInit
  • Runs once after the projected content is initialized.
• ngAfterContentChecked
  • Runs whenever the projected content changes (and is checked again by Angular).

Content projection in Angular

Content projection allows a parent component to pass dynamic content into a child component.

• The child uses <ng-content> as a placeholder for whatever the parent supplies.
• The projected content can be:
  • Simple HTML
  • Complex HTML
  • Even another component (e.g., an “address” component)

How hooks relate to content projection

In the child component (e.g., Authors), the projected content may not always be available immediately.

• Use ngAfterContentInit
  • For logic that depends on content being initialized.
• Use ngAfterContentChecked
  • For logic that must respond to content changes.

Using @ContentChild to access projected component/data

When the parent projects a component (not just HTML), the child can access it using @ContentChild(...).

Example described:

• The projected component is AuthorsAddress
• The child (Authors) uses @ContentChild(AuthorsAddress) to get a reference
• The child then reads something like this.address?.property (using optional chaining) and uses it in its logic

Note: The video highlights that ngAfterContentInit may run before the projected reference is available in some scenarios, while ngAfterContentChecked will see the updated content reliably after it exists.

---

Method / instruction steps shown

1) Set up the parent-child structure for content projection

1. Open the Angular bookstore app and run it with:
   • ng serve
2. Identify:
   • Parent component: Home
   • Child component: Authors
3. Use the child component inside the parent conceptually like:
   • <app-authors>...</app-authors>
4. In the child component template, add:
   • <ng-content> to mark where parent-provided content should render.

2) Demonstrate projecting different content from the parent

• First example: parent projects an h1 element with text
  • The child displays that text where <ng-content> is placed.
• Second example: parent projects a button (or other HTML)
  • The child displays that button as well.

3) Implement lifecycle hooks in the child to observe behavior

In the child component (Authors), implement:

• ngAfterContentInit
  • Add console.log(...) to confirm when it fires.
• ngAfterContentChecked
  • Add console.log(...) to confirm when it fires.

Observe:

• If the child component appears multiple times in the parent, the hooks run for each instance.

4) Make the projected content a component (not only HTML)

1. Create a new component:
   • AuthorsAddress (via Angular CLI; described as ng g c ...)
2. Declare and export it in the shared module:
   • Add it to declarations
   • Add it to exports
3. In AuthorsAddress:
   • Use an @Input() property to receive data
   • Display that input data in its template

4. Project AuthorsAddress from Home into Authors:

   • Parent conceptually uses something like: <app-authors-address [inputProp]="...">...</app-authors-address>

5. Confirm:

   • The projected component renders inside the child’s <ng-content> slot.

5) Access the projected component from inside the child using @ContentChild

In the Authors child component:

• Add @ContentChild(AuthorsAddress)
  • Assign the reference to a property such as address
• Use safe access (optional chaining) to avoid undefined errors:
  • Example approach: this.address?.<value>

Observe:

• ngAfterContentInit may run before the reference exists in some scenarios (video notes it can be undefined for the first instance).
• ngAfterContentChecked sees the data reliably after content exists.

6) Demonstrate hook firing conditions by changing projected content

1. Simplify to a single Authors usage so outputs are clearer.
2. Introduce a dynamic value in the parent:
   • A string property like: public address = 'india'
   • A method (e.g., a counter or click handler) that changes address
3. Project content in a way that uses address, so updates change what’s projected.
4. Observe:
   • When content changes:
     • ngAfterContentChecked runs (often repeatedly)
   • When content is first initialized:
     • ngAfterContentInit runs once

Final observation stated:

• ngAfterContentInit only runs once after initial content is set
• ngAfterContentChecked runs on subsequent content changes/checks

---

Speakers / sources featured

• No specific person is named in the subtitles.
• Source: An educational YouTube video titled “ngAfterContentInit vs ngAfterContentChecked in angular | Component Lifecycle hooks” with an unnamed presenter.