ngAfterViewChecked() is an Angular lifecycle hook that runs after Angular checks the component's view and child views during change detection.

Simple definition: ngAfterViewChecked() runs after Angular finishes checking the component's view for updates.

Unlike ngAfterViewInit(), which runs once, ngAfterViewChecked() can run many times.

Why Do We Need ngAfterViewChecked()?

Suppose your component has:

<h2>{{ name }}</h2>

When:

name = 'Syed';

changes to:

name = 'Mohamed';

Angular performs change detection and updates/checks the view.

After Angular finishes checking the view:

ngAfterViewChecked()

is called.

Conceptually:

Data changes
    ↓
Angular change detection
    ↓
Angular checks component view
    ↓
Updates/checks child views
    ↓
ngAfterViewChecked()

It is useful when you specifically need to execute logic after Angular has completed checking the view.

Full Simple Sample Program

app.ts

import {
  AfterViewChecked,
  AfterViewInit,
  Component
} from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h1>ngAfterViewChecked Example</h1>

    <h2>{{ name }}</h2>

    <button (click)="changeName()">
      Change Name
    </button>
  `
})
export class App
  implements AfterViewInit, AfterViewChecked {

  name = 'Syed';

  changeName(): void {
    this.name = 'Mohamed';
  }

  ngAfterViewInit(): void {
    console.log('View Initialized');
  }

  ngAfterViewChecked(): void {
    console.log('View Checked');
  }
}

Explanation

Initially:

name = 'Syed';

Angular creates the template:

<h2>{{ name }}</h2>

The screen displays:

Syed

After Angular initializes the view:

ngAfterViewInit()

runs.

Then, after Angular checks the view:

ngAfterViewChecked()

runs.

You may see:

View Initialized
View Checked

Now Click the Button

The button calls:

changeName(): void {
  this.name = 'Mohamed';
}

The value changes:

Syed
 ↓
Mohamed

Angular performs change detection:

name changed
    ↓
Angular checks view
    ↓
{{ name }} updated
    ↓
View checked
    ↓
ngAfterViewChecked()

So this runs again:

ngAfterViewChecked(): void {
  console.log('View Checked');
}

Very Important Point

ngAfterViewChecked() does not mean:

"The view definitely changed."

It means:

"Angular has finished checking the view."

Even when nothing meaningful changed, the hook can still execute as part of a change-detection cycle.

That's why this:

ngAfterViewChecked(): void {
  console.log('View Checked');
}

may print many times.

ngAfterViewInit() vs ngAfterViewChecked()

This is the most important difference.

Easy way to remember

ngAfterViewInit()
       ↓
View created and initialized
       ↓
ONE TIME


ngAfterViewChecked()
       ↓
View checked
       ↓
MANY TIMES

ngAfterContentChecked() vs ngAfterViewChecked()

These two are also easy to confuse.

ngAfterContentChecked()

Deals with projected content:

<app-card>

   <h2>Welcome</h2>   ← Parent content

</app-card>

The child displays it through:

<ng-content></ng-content>

After Angular checks that projected content:

ngAfterContentChecked()

ngAfterViewChecked()

Deals with the component's view:

<h2>{{ name }}</h2>
<button>Save</button>

After Angular checks the view:

ngAfterViewChecked()

So:

Parent projected content
        ↓
ngAfterContentChecked()


Component's view
        ↓
ngAfterViewChecked()

All Four After... Hooks

This is a useful way to remember them together.

Pattern

CONTENT
│
├── ngAfterContentInit()
│       └── Once
│
└── ngAfterContentChecked()
        └── Many times


VIEW
│
├── ngAfterViewInit()
│       └── Once
│
└── ngAfterViewChecked()
        └── Many times

This pattern makes these four hooks much easier to remember.

Lifecycle Order

Simplified lifecycle order:

ngOnChanges()
      ↓
ngOnInit()
      ↓
ngDoCheck()
      ↓
ngAfterContentInit()       ← Once
      ↓
ngAfterContentChecked()    ← Repeated
      ↓
ngAfterViewInit()          ← Once
      ↓
ngAfterViewChecked()       ← Repeated

After initial creation, a later change-detection cycle roughly involves:

ngDoCheck()
      ↓
ngAfterContentChecked()
      ↓
ngAfterViewChecked()

The Init hooks don't run again.

Advantages

1. Runs After View Checking

It provides a lifecycle point after Angular has checked the component's view and child views.

2. Useful for Specialized View Logic

It can be useful when some logic genuinely must happen after a view check has completed.

3. Access to Initialized View

At this point, the component's view has already been initialized.

Disadvantages

The main disadvantage is that it can execute very frequently.

1. Performance

Avoid expensive operations:

ngAfterViewChecked(): void {

  // Avoid expensive work
  this.performHugeCalculation();
}

2. Avoid API Calls

Don't do this:

ngAfterViewChecked(): void {

  this.http.get('/api/products')
    .subscribe();
}

Because Angular may call this hook repeatedly, potentially causing repeated HTTP requests.

3. Be Careful Modifying Bound Values

Avoid casually changing template-bound values:

ngAfterViewChecked(): void {
  this.name = 'Mohamed';
}

Changing state during or immediately after view checking can cause additional change-detection work and, in some situations, development-mode errors such as ExpressionChangedAfterItHasBeenCheckedError.

Key Points

• ngAfterViewChecked() is an Angular lifecycle hook.
• It runs after Angular checks the component's view and child views.
• It can run many times.
• It does not mean that something actually changed.
• ngAfterViewInit() runs once.
• ngAfterViewChecked() runs repeatedly.
• Keep the code inside it lightweight.
• Avoid API calls and expensive operations.
• Use it only when you specifically need post-view-check logic.

Interview Questions and Answers

1. What is ngAfterViewChecked()?

ngAfterViewChecked() is an Angular lifecycle hook called after Angular checks a component's view and child views.

2. How many times does ngAfterViewChecked() run?

It can run many times because it participates in Angular's change-detection cycles.

3. Does ngAfterViewChecked() run only when the view changes?

No. It runs after Angular checks the view, even when no actual change occurred.

4. What is the difference between ngAfterViewInit() and ngAfterViewChecked()?

ngAfterViewInit() runs once after the view is initialized.

ngAfterViewChecked() runs repeatedly after Angular checks the view.

5. What is the difference between ngAfterContentChecked() and ngAfterViewChecked()?

ngAfterContentChecked() relates to projected content from the parent.

ngAfterViewChecked() relates to the component's own view and child views.

6. Should we call APIs inside ngAfterViewChecked()?

Generally, no. It can execute frequently and may result in repeated API requests.

Easy Memory Trick

Just remember Init = Once, Checked = Many:

Content
   │
   ├── Init     → ONCE
   └── Checked  → MANY


View
   │
   ├── Init     → ONCE
   └── Checked  → MANY

And:

Content = Parent-projected content
View    = Component's own view

One-line Interview Answer

ngAfterViewChecked() is an Angular lifecycle hook that runs after Angular checks the component's view and child views, and it can execute multiple times during change detection.