AfterContentChecked life cycle hook in angular

The AfterContentChecked is the life cycle hook that angular executes after every change detection once angular completes the checking of the content for changes.

This life cycle hook will be executed even if there is no projected content in the component. If content projected from the parent component, in that case, it updates the properties decorated with the ContentChild and ContentChildren before executing this life cycle hook.

It executes after the creation of the component and ngDoCheck and AfterContentInit life cycle hook. It executes after every change detection once angular completes the checking of the content for changes.

Example

AppComponent

 1 import { Component } from '@angular/core';
 2 
 3 @Component({
 4   selector: 'app-root',
 5   templateUrl: 'app.component.html',
 6   styleUrls: ['./app.component.less']
 7 })
 8 export class AppComponent {
 9 
 10 }

In the above example, a component is created that bind with specified template that adds child component with nested elements.

AppComponent template

 1 <h1> Life cycle hook </h1>
 2 
 3 <app-child>
 4     <h2 #h2> Content child </h2>
 5 </app-child>

In the above template, a app-child component is added by specifying a html element h2. A child component template uses a ng-content that will be replace with specified component content h2. A nested component define with element reference using hash(#) symbol followed by name.

Child component with inline template

 1 import {
 2   AfterContentInit,
 3   Component,
 4   ContentChild,
 5   ElementRef,
 6   Renderer2,
 7 } from '@angular/core';
 8 
 9 @Component({
 10   selector: 'app-child',
 11   template: `
 12   <h1 #h1>Child component</h1>
 13   <!-- h2 tag will be place here -->
 14   <ng-content></ng-content>
 15   `,
 16 })
 17 export class ChildComponent implements AfterContentInit {
 18   // h2 tag injected from parent component - app.component.html
 19   @ContentChild('h2') element?: ElementRef;
 20 
 21   constructor(private renderer: Renderer2) {}
 22 
 23   // manipulate projected tag h2 using @ContentChild
 24   ngAfterContentInit() {
 25     if (this.element) {
 26       this.renderer.setStyle(this.element.nativeElement, 'color', 'red');
 27     }
 28   }
 29   // called twice, when this component rendered and after style change
 30   ngAfterContentChecked() {
 31     // If content projected from parent and changes are checked
 32     // using @ContentChild or @ContentChildren
 33     console.log('AfterContentChecked Init Life cycle hook');
 34   }
 35 }

In the above example, a component is define with inline template that specifies a content projection using ng-content. It replaced with projected html element h2 that is specified in App.component template. A constructor method inject the dependency of Render2 object that allows to change element dynamically.

An element reference created for h2 passed from parent template by specifying a string element reference h2 using @ContentChild decorator. A style of the projected element will be changed in component life cycle hook ngAfterContentInit().

A component life cycle hook, ngAfterViewInit() method called once a component template rendered on browser. An another life cycle hook, ngAfterContentInit() called when content (h2 element) specified inside app-child element rendered (h2 replaced with ng-content) that updates style for projected element.

A life cycle hook ngAfterContentChecked() will be called once a projection element rendered on browser and changes are checked. It called after every change made on element.

Related options for your search

Component life cycle hook in angular

Lifecycle hook for directive in vue

React class component life cycle

Vue instance lifecycle hooks

Instance lifecycle methods in vue

Thread life cycle in Java

Setup lifecycle hooks in Vue 3

AfterContentInit life cycle hook in angular

AfterViewInit life cycle hook in angular

AfterViewChecked life cycle hook in angular

OnChnages life cycle hook in angular