@ViewChild decorator usage in Angular - Mini Project: Build & Apply

@ViewChild Decorator Usage in Angular

📖 Scenario: You are building a simple Angular component that needs to access a button element inside its template to change its text dynamically.

🎯 Goal: Learn how to use the @ViewChild decorator to get a reference to a template element and update its properties in the component class.

📋 What You'll Learn

Create a button element in the component template with a template reference variable.

Use the @ViewChild decorator to get the button element in the component class.

Create a method to change the button text using the @ViewChild reference.

Call the method after the view initializes to update the button text.

💡 Why This Matters

🌍 Real World

Accessing and manipulating DOM elements or child components directly is common in Angular apps for dynamic UI updates, animations, or integrating third-party libraries.

💼 Career

Understanding @ViewChild is essential for Angular developers to interact with template elements and child components, enabling more interactive and responsive applications.

1

Create a button with a template reference variable

In the component template, create a <button> element with the template reference variable #myButton and the initial text Click me.

Angular

Click me

Hint

Use #myButton inside the button tag to create a template reference variable.

2

Add @ViewChild to get the button element

In the component TypeScript file, import ViewChild and ElementRef from @angular/core. Then declare a property called myButton using @ViewChild('myButton') with type ElementRef<HTMLButtonElement>.

Angular

Click me

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  // Your code here
}

Hint

Use @ViewChild('myButton') to get the button element by its template reference variable.

3

Create a method to change the button text

Add a method called changeButtonText inside the component class. Inside this method, use this.myButton.nativeElement.textContent = 'Updated!' to change the button text.

Angular

Click me

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  @ViewChild('myButton') myButton!: ElementRef;

  // Add changeButtonText method below
  // Your code here
}

Hint

Use this.myButton.nativeElement.textContent to update the button's text.

4

Call the method after view initialization

Implement the ngAfterViewInit lifecycle hook in the component class. Inside it, call the changeButtonText() method to update the button text after the view loads.

Angular

Click me

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements AfterViewInit {
  @ViewChild('myButton') myButton!: ElementRef;

  changeButtonText() {
    this.myButton.nativeElement.textContent = 'Updated!';
  }

  // Implement ngAfterViewInit and call changeButtonText
  // Your code here
}

Hint

Use the ngAfterViewInit lifecycle hook to safely access the view child after the view is initialized.

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