@ViewChild decorator usage in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the @ViewChild decorator in Angular?

The @ViewChild decorator lets you get a reference to a child component, directive, or DOM element inside your component class. It helps you interact with or control that child directly.

beginner

How do you use @ViewChild to get a reference to a template element with a template reference variable #myDiv?

You add @ViewChild('myDiv') myDivRef: ElementRef; in your component class. This lets you access the DOM element inside myDivRef.nativeElement.

intermediate

When is the best lifecycle hook to safely use the @ViewChild reference in Angular?

Use the ngAfterViewInit() lifecycle hook. This runs after Angular has fully initialized the view and the @ViewChild reference is ready to use.

advanced

What does setting { static: true } or { static: false } in @ViewChild options mean?

{ static: true } means Angular resolves the reference before change detection runs (good for access in ngOnInit). { static: false } means Angular resolves it after change detection (use in ngAfterViewInit).

intermediate

Can @ViewChild be used to get a reference to a child component? How?

Yes. You pass the child component class to <code>@ViewChild</code>, like <code>@ViewChild(ChildComponent) childCompRef: ChildComponent;</code>. This lets you call methods or access properties of the child component.

What does @ViewChild('myInput') inputRef: ElementRef; do in an Angular component?

A Creates a new input element in the template.

B Gets a reference to the DOM element with template variable <code>#myInput</code>.

C Binds a value to the input element.

D Defines a new component named myInput.

The @ViewChild decorator with a string gets the element or directive with that template reference variable.

When can you safely access a @ViewChild reference without it being undefined?

A Inside <code>ngOnInit()</code> always.

B Before the component loads.

C Inside <code>ngAfterViewInit()</code> lifecycle hook.

D Inside the constructor.

@ViewChild references are set after the view initializes, so ngAfterViewInit() is the safe place.

What does the { static: true } option in @ViewChild do?

A Resolves the reference before change detection runs.

B Prevents the reference from being set.

C Makes the reference read-only.

D Delays the reference resolution until after view init.

Setting { static: true } tells Angular to resolve the reference early, useful for access in ngOnInit.

Can @ViewChild be used to access a child component's methods?

A Yes, by passing the child component class to <code>@ViewChild</code>.

B No, it only works with DOM elements.

C Only if the child component is in a different module.

D Only if the child component is a directive.

@ViewChild can get a reference to a child component instance, allowing method calls.

What type is commonly used with @ViewChild to access native DOM elements?

A ComponentRef

B TemplateRef

C ViewContainerRef

D ElementRef

ElementRef wraps native DOM elements and is used with @ViewChild to access them.

Explain how to use @ViewChild to get a reference to a DOM element and when to access it safely.

Think about template variables and Angular lifecycle timing.

Describe the difference between { static: true } and { static: false } options in @ViewChild and when to use each.

Consider when Angular sets the view references.

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