ngAfterContentInit Example | Angular

Key Takeaways

• ngAfterContentInit() is invoked after the first content check and initialization.
• It provides a hook to execute logic after Angular has fully initialized the content projected into the component.
• This lifecycle hook runs once, making it ideal for one-time logic dependent on projected content initialization.

ngOnChanges Example

ngOnInit Example

ngDoCheck Example

ngAfterContentInit Example

ngAfterContentChecked Example

ngAfterViewInit Example

ngAfterViewChecked Example

ngOnDestroy Example

import { Component, OnInit, AfterContentInit, DoCheck } from '@angular/core';

@Component({
  selector: 'app-home',
  template: `Click me`,
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit, AfterContentInit {
  constructor() { }
  ngOnInit() {
    console.log("ngOnInit called")
  }
  ngDoCheck(){
    console.log("ngDoCheck executed")
  }
  ngAfterContentInit(){
    console.log("ngAfterContentInit executed");
  }
  clickMe(){
    console.log("link clicked")
  }
}

ngAfterContentInit() runs after the first ngDoCheck().

When should you use ngAfterContentInit?

Use ngAfterContentInit when you need to perform operations that should occur only once and after Angular has inserted external content into your component view. This hook is typically used for complex initialization logic that depends on the final projection of content into the view.

FAQ

What is the purpose of the ngAfterContentInit lifecycle hook?

The ngAfterContentInit lifecycle hook is designed to execute once after Angular first checks the content projected into a component. It allows you to run logic that must depend on the full initialization of that content.

Can I force ngAfterContentInit to run more than once?

No, ngAfterContentInit is intentionally designed to run only once after the projected content is initialized for the first time. If you need repeated logic execution, consider using a different lifecycle hook or implement custom checks in ngDoCheck.

How does ngAfterContentInit differ from ngAfterViewInit?

ngAfterContentInit focuses on the initialization of content that is projected by structural directives like ng-content. In contrast, ngAfterViewInit is invoked after the component’s own view has been initialized.