ngAfterViewInit for view ready in Angular - Step-by-Step Execution

Concept Flow - ngAfterViewInit for view ready

Component Initialized

↓

ngOnInit runs

↓

Template Rendered

↓

ngAfterViewInit runs

↓

View is Ready for DOM Access

↓

Perform DOM or Child Component Actions

Shows the lifecycle flow where ngAfterViewInit runs after the component's view is fully rendered and ready.

Execution Sample

Angular

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

@Component({ selector: 'app-sample', template: '<div #box>Box</div>' })
export class SampleComponent implements AfterViewInit {
  @ViewChild('box') box!: ElementRef;
  ngAfterViewInit() {
    console.log(this.box.nativeElement.textContent);
  }
}

Logs the text content of a div after the view is fully initialized.

Execution Table

Step	Lifecycle Hook	View Status	Action	Output
1	Constructor	View not rendered	Component instance created	No output
2	ngOnInit	View not rendered	Initialize data	No output
3	Template Render	View rendered	DOM elements created	No output
4	ngAfterViewInit	View fully rendered	Access @ViewChild element	Logs 'Box' text content
5	Component Ready	View ready	Further DOM or child component actions	No output

💡 ngAfterViewInit runs after the view is fully rendered, allowing safe DOM access.

Variable Tracker

Variable	Constructor	ngOnInit	AfterViewInit	Final
box	undefined	undefined	ElementRef to <div>	ElementRef to <div>

Key Moments - 2 Insights

Why can't we access the @ViewChild element in ngOnInit?

Because the view is not yet rendered during ngOnInit, so @ViewChild elements are still undefined. See execution_table step 2 and 3.

What guarantees that the DOM element is ready in ngAfterViewInit?

Angular calls ngAfterViewInit only after the template and child views are fully initialized and rendered, as shown in execution_table step 4.

Visual Quiz - 3 Questions

Look at the execution table, what is the status of the view during ngOnInit?

A View fully rendered

B View not rendered

C View partially rendered

D View destroyed

💡 Hint

Check the 'View Status' column at step 2 in the execution_table.

At which step does the @ViewChild element become available?

A ngAfterViewInit

B ngOnInit

C Constructor

D After component ready

💡 Hint

Refer to the 'Variable' row for 'box' in variable_tracker and step 4 in execution_table.

If we try to access the @ViewChild element in the constructor, what happens?

A It logs the text content immediately

B It is available and can be used

C It is undefined and causes errors

D Angular delays constructor until view ready

💡 Hint

See variable_tracker 'box' value at Constructor and execution_table step 1.

Concept Snapshot

ngAfterViewInit lifecycle hook runs after the component's view and child views are fully initialized.
Use it to safely access @ViewChild or DOM elements.
ngOnInit runs earlier, before the view is rendered.
Accessing view elements before ngAfterViewInit leads to undefined references.
Typical use: DOM manipulation, child component interaction after view ready.

Full Transcript

In Angular, the ngAfterViewInit lifecycle hook runs after the component's template and child views are fully rendered. This means you can safely access DOM elements or child components marked with @ViewChild. Before this, during ngOnInit or the constructor, the view is not ready, so @ViewChild elements are undefined. The execution flow starts with the constructor creating the component instance, then ngOnInit initializes data but the view is not rendered yet. After the template renders, ngAfterViewInit runs, allowing access to the view elements. This is why DOM access or child component calls should be done in ngAfterViewInit to avoid errors. The variable tracker shows the @ViewChild element is undefined until ngAfterViewInit. The execution table confirms these steps and the safe point to access the view. Understanding this flow helps avoid common beginner mistakes like trying to access view elements too early.