ngAfterContentChecked - Angular Lifecycle Hook

⚙️ Angular ngAfterContentChecked Lifecycle Hook

📘 Table of Contents What is ngAfterContentChecked? When to Use It? Common Use Cases Warnings Code Example Conclusion

What is ngAfterContentChecked?

ngAfterContentChecked is an Angular lifecycle hook called after every change detection cycle, specifically for checking the projected content rendered via <ng-content>. Unlike ngAfterContentInit (which runs only once), this hook runs repeatedly.

When to Use ngAfterContentChecked?

• React to dynamic changes in projected content.
• Monitor content inside <ng-content> for updates.
• Perform logic after every content check — but be cautious about performance.

Common Use Cases

• Detecting changes in projected text, nodes, or elements.
• Dynamic layout or styling adjustments based on content changes.
• Sync internal logic with dynamically updated inputs projected via <ng-content>.
• Debugging change detection cycles during development.

⚠️ Important:

• This hook runs very frequently — avoid expensive computations inside it.
• Do not modify data-bound properties here. It may cause Angular errors like ExpressionChangedAfterItHasBeenCheckedError.
• Commonly used with @ContentChild or @ContentChildren to interact with projected content.

Example

Parent Component Template

<app-alert>
  <p #projectedRef>This is a dynamic error message!</p>
</app-alert>

Child Component (AlertComponent)

import {
  AfterContentChecked,
  Component,
  ContentChild,
  ElementRef,
  Renderer2
} from '@angular/core';

@Component({
  selector: 'app-alert',
  template: `
    <div class="alert-box">
      <ng-content></ng-content>
    </div>
  `,
  styles: [\`
    .alert-box {
      border: 1px solid red;
      padding: 10px;
      background-color: #ffe5e5;
    }
    .highlight-error {
      background-color: yellow;
    }
  \`]
})
export class AlertComponent implements AfterContentChecked {
  @ContentChild('projectedRef') projectedContent!: ElementRef;
  private previousText = '';

  constructor(private renderer: Renderer2) {}

  ngAfterContentChecked() {
    const currentText = this.projectedContent?.nativeElement?.textContent;

    if (currentText && currentText !== this.previousText) {
      console.log('Projected content changed to:', currentText);
      this.previousText = currentText;

      if (currentText.includes('error')) {
        this.renderer.addClass(this.projectedContent.nativeElement, 'highlight-error');
      } else {
        this.renderer.removeClass(this.projectedContent.nativeElement, 'highlight-error');
      }
    }
  }
}

Conclusion

ngAfterContentChecked is a powerful hook for monitoring dynamic content passed into components using content projection. However, because it runs during every change detection cycle, it should be used sparingly and optimized to avoid performance issues. Always prefer safe DOM manipulation methods like Renderer2 and avoid triggering extra change detection cycles.