What is ngAfterContentInit with Example - Angular ?

This tutorial guides you on what is ngAfterContentInit and why should we use ngAfterContentInit lifecycle hook in Angular.

What is ngAfterContentInit ?

ngAfterContentInit() is a callback method which will get called by Angular immediately after it has completed initialization of directive’s content and after every default change detection runs. It will be invoked only once when the directive is instantiated.

And ngAfterContentInit() lifecycle hook will get called after the following lifecycle hooks get invoked; ngOnChanges(), ngOnInit() and ngDoCheck().

ngOnChanges – Invoked after a bound input property changes.
ngOnInit – Invoked once the component is initialized.
ngDoCheck – Invoked after every change detection run
ngAfterContentInit – Invoked after content (ng-content) has been projected into view.

ngAfterContentInit(): void

Parameters
There are no parameters.

Returns
void

Note, the following tutorial guides you on how to project content (ng-content) into view ( Please check Project contents into angular component using ng-content)

For example, to project content (ng-content) in to view, what you need to do is to replace that HTML code in the child component’s view with placeholder tag for the content i.e., <ng-content> tags as shown below.

I had just commented the HTML code section as you see below and added <ng-content> tags.

<div
class="panel panel-default">
<div class="panel-heading">{{ itemElem.title }}</div>
<div class="panel-body">

  <!-- Projecting content into component with ng-content-->
  <ng-content> </ng-content>
  <!--   <p>
    <strong *ngIf="itemElem.type === 'item'" style="color: orange">{{ itemElem.desc }}</strong>
    <em *ngIf="itemElem.type === 'spec'">{{ itemElem.spec }}</em>
  </p>   -->
  
</div>
</div>

For more details on ng-content please check the above mentioned link/ tutorial.

Why should we use ngAfterContentInit in Angular ?

AfterContentInit is a lifecycle hook that will be called after Angular has initialize all of the contents of a directive. You can define an ngAfterContentInit() method in your component to handle any additional initialization tasks.

interface AfterContentInit {

  ngAfterContentInit(): void

}

The following sneppet shows how to implement the above interface in your component to define your own content initialization method.

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

@Component({
  selector: 'app-item-element',
  templateUrl: './item-element.component.html',
  styleUrls: ['./item-element.component.css'],
  
})

export class ItemElementComponent implements OnInit, OnChanges, DoCheck, AfterContentInit{

  @Input() itemElem : {type: string, title: string, desc: string, spec: string};
  @Input() title : string;
  
  constructor() {
    console.log("constructor called.....");
  }

  ngOnChanges(changes: SimpleChanges) {
    console.log("ngOnChanges called.....");
    console.log(changes);
  }

  ngOnInit(): void {
    console.log("ngOnInit called.....");
  }

  ngDoCheck(){
    console.log("ngDoCheck called.....");
  }

  ngAfterContentInit(){
    console.log("ngAfterContentInit called.....");
  }

}

That’s it. You had learnt what is ngAfterContentInit lifecycle hook and when we should use ngAfterContentInit in Angular.

Hope it helped 🙂

Also See:

What is ngAfterContentInit with Example – Angular ?

What is ngAfterContentInit ?

Why should we use ngAfterContentInit in Angular ?

References: