@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.

Practice

1. What is the primary purpose of the @ViewChild decorator in Angular?

easy

A. To get a reference to a template element or child component

B. To create a new Angular module

C. To define routes in the application

D. To style components dynamically

Solution

1. Step 1: Understand the role of @ViewChild

   @ViewChild is used to access a child element or component from the template directly in the class.

2. Step 2: Compare with other options

   Creating modules, defining routes, or styling are unrelated to @ViewChild's purpose.

3. Final Answer:

   To get a reference to a template element or child component -> Option A

4. Quick Check:

   @ViewChild = Reference to template element [OK]

Hint: Remember: @ViewChild grabs template elements or child components [OK]

Common Mistakes:

• Confusing @ViewChild with routing or module decorators
• Thinking @ViewChild creates components
• Assuming @ViewChild styles elements

2. Which of the following is the correct syntax to use @ViewChild to get a reference to a template element with template variable #myInput?

easy

A. @ViewChild(myInput) inputElement: ElementRef;

B. @ViewChild('myInput') inputElement: ElementRef;

C. @ViewChild(#myInput) inputElement: ElementRef;

D. @ViewChild('inputElement') myInput: ElementRef;

Solution

1. Step 1: Check correct string usage in @ViewChild

   The template variable name must be passed as a string, so it should be '@ViewChild('myInput')'.

2. Step 2: Validate variable names and types

   The variable name in the class can be anything, here 'inputElement', and type should be ElementRef for native elements.

3. Final Answer:

   @ViewChild('myInput') inputElement: ElementRef; -> Option B

4. Quick Check:

   Template variable name as string in @ViewChild [OK]

Hint: Always pass template variable name as a string in @ViewChild [OK]

Common Mistakes:

• Omitting quotes around template variable name
• Using # inside @ViewChild argument
• Swapping variable names and template references

3. Given the following Angular component code, what will be logged to the console after the view initializes?

  <input #myInput type="text" value="Hello">

  export class MyComponent implements AfterViewInit {
    @ViewChild('myInput') inputRef!: ElementRef<HTMLInputElement>;

    ngAfterViewInit() {
      console.log(this.inputRef.nativeElement.value);
    }
  }

medium

A. undefined

B. Error: inputRef is undefined

C. null

D. Hello

Solution

1. Step 1: Understand @ViewChild and ngAfterViewInit timing

   @ViewChild gets the input element reference, and ngAfterViewInit runs after the view is ready, so inputRef is defined.

2. Step 2: Access nativeElement value

   inputRef.nativeElement.value accesses the input's value attribute, which is 'Hello'.

3. Final Answer:

   Hello -> Option D

4. Quick Check:

   Access input value via @ViewChild after view init [OK]

Hint: Access @ViewChild only after ngAfterViewInit to get values [OK]

Common Mistakes:

• Trying to access @ViewChild in constructor or ngOnInit
• Assuming inputRef is null or undefined after view init
• Confusing nativeElement with the ElementRef itself

4. Identify the error in the following Angular component code using @ViewChild:

  export class MyComponent {
    @ViewChild('myButton') buttonRef: ElementRef;

    ngOnInit() {
      this.buttonRef.nativeElement.click();
    }
  }

medium

A. Accessing @ViewChild reference before view initialization

B. Missing quotes around 'myButton' in @ViewChild

C. Using ElementRef instead of TemplateRef

D. No error, code is correct

Solution

1. Step 1: Check lifecycle hook used

   ngOnInit runs before the view is fully initialized, so @ViewChild references are not ready yet.

2. Step 2: Correct lifecycle hook for @ViewChild access

   Accessing @ViewChild should be done in ngAfterViewInit to ensure the element exists.

3. Final Answer:

   Accessing @ViewChild reference before view initialization -> Option A

4. Quick Check:

   @ViewChild ready only after ngAfterViewInit [OK]

Hint: Use ngAfterViewInit, not ngOnInit, to access @ViewChild [OK]

Common Mistakes:

• Accessing @ViewChild in ngOnInit causing undefined errors
• Confusing lifecycle hooks for view queries
• Ignoring the timing of template element availability

5. You want to call a method focusInput() on a child component ChildComponent using @ViewChild. Which of the following is the correct way to do this safely after the view initializes?

hard

A. Use @ViewChild(ChildComponent) child: ElementRef; and call this.child.nativeElement.focusInput() inside ngAfterViewInit()

B. Use @ViewChild('child') child: ChildComponent; and call this.child.focusInput() inside constructor()

C. Use @ViewChild(ChildComponent) child!: ChildComponent; and call this.child.focusInput() inside ngAfterViewInit()

D. Use @ViewChild('child') child: ElementRef; and call this.child.focusInput() inside ngOnInit()

Solution

1. Step 1: Correct @ViewChild usage for child component

   Use the component class type in @ViewChild to get the child component instance, e.g. @ViewChild(ChildComponent).

2. Step 2: Call child method after view initialization

   Call the method inside ngAfterViewInit to ensure the child component is ready.

3. Final Answer:

   Use @ViewChild(ChildComponent) child!: ChildComponent; and call this.child.focusInput() inside ngAfterViewInit() -> Option C

4. Quick Check:

   Child component method call via @ViewChild after view init [OK]

Hint: Use component class in @ViewChild and call methods after ngAfterViewInit [OK]

Common Mistakes:

• Calling child methods in constructor or ngOnInit
• Using ElementRef instead of component class for child components
• Trying to access nativeElement for component methods