ngAfterContentInit Example | Angular

Last modified: April 22, 2019

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: `<a (click)="clickMe()">Click me</a>`,
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  constructor() { }
  ngOnInit() {
    console.log("onInit called")
  }
  ngDoCheck(){
    console.log("do check")
  }
  ngAfterContentInit(){
    console.log("after content init");
  }
  clickMe(){
    console.log("link clicked")
  }
}

ngAfterContentInit() runs once after the first ngDoCheck().

In the above example, ngAfterContentInit() runs after ngOnInit and ngDoCheck.

Notice how ngAfterContentInit() is called only once. Triggering the clickMe() function will not run ngAfterContentInit().

When should you use ngAfterContentInit?

Use ngAfterContentInit to call something once after all of the content has been initialized.

ngAfterContentInit will run once after the first ngDoCheck().

You might also like: