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