@ViewChild decorator usage in Angular - Step-by-Step Execution

Concept Flow - @ViewChild decorator usage

Component Template Rendered

↓

@ViewChild Finds Element/Component

↓

Assign Reference to Property

↓

Access Property in Component Code

↓

Use Reference for DOM or Child Component Interaction

Angular renders the template, then @ViewChild finds the element or child component and assigns it to a property for use in the component code.

Execution Sample

Angular

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

@Component({ selector: 'app-root', template: `<button #btn>Click me</button>` })
export class AppComponent implements AfterViewInit {
  @ViewChild('btn') button!: ElementRef;
  ngAfterViewInit() {
    console.log(this.button.nativeElement.textContent);
  }
}

This code uses @ViewChild to get a reference to a button element and logs its text content after the view initializes.

Execution Table

Step	Action	Evaluation	Result
1	Render template	Template with <button #btn>	Button element created in DOM
2	@ViewChild('btn') searches template	Finds element with template ref 'btn'	Reference to button element assigned to 'button' property
3	ngAfterViewInit lifecycle hook runs	this.button is defined	Access button.nativeElement.textContent
4	console.log outputs	Outputs 'Click me'	Text content of button logged
5	Component ready for interaction	button reference usable	Can manipulate button element in code

💡 View initialized and @ViewChild reference assigned, ready for use in component.

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
button	undefined	ElementRef to button	ElementRef to button	ElementRef to button

Key Moments - 3 Insights

Why is the @ViewChild property undefined before ngAfterViewInit?

Because Angular sets the @ViewChild reference only after the view is initialized, as shown in execution_table step 3.

What does the string 'btn' inside @ViewChild('btn') refer to?

It refers to the template reference variable #btn on the button element, as seen in execution_table step 2.

Can you access the native DOM element directly from the @ViewChild property?

Yes, via the ElementRef's nativeElement property, demonstrated in execution_table step 3 and 4.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'button' after step 2?

A undefined

B ElementRef pointing to the button element

C The string 'btn'

D null

💡 Hint

Check the 'button' variable value in variable_tracker after step 2.

At which step does the console.log output the button's text content?

A Step 4

B Step 3

C Step 2

D Step 5

💡 Hint

Look at the 'Action' and 'Result' columns in execution_table for console.log.

If the template reference variable was changed from #btn to #buttonRef, what else must change?

A Nothing, it works automatically

B The property name 'button' to 'buttonRef'

C The string inside @ViewChild decorator to 'buttonRef'

D The selector in @Component decorator

💡 Hint

Refer to execution_table step 2 where @ViewChild searches by the template reference string.

Concept Snapshot

@ViewChild decorator usage in Angular:
- Use @ViewChild('templateRef') to get element/component reference
- Reference assigned after view initialization (ngAfterViewInit)
- Access native DOM via ElementRef.nativeElement
- Useful for direct DOM or child component interaction
- Template ref string must match #variable in template

Full Transcript

The @ViewChild decorator in Angular lets you get a reference to an element or child component in your template. Angular renders the template first, then @ViewChild finds the element with the matching template reference variable and assigns it to a property in your component class. This reference is only available after the view initializes, typically accessed in the ngAfterViewInit lifecycle hook. You can then use this reference to interact with the DOM element or child component directly. For example, if you have a button with #btn in your template, you use @ViewChild('btn') to get its ElementRef. Then you can access the native DOM element via nativeElement. This process helps you manipulate or read from the DOM safely within Angular's lifecycle.