Template reference for direct access in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a template reference variable in Angular?

A template reference variable is a way to access a DOM element or Angular component directly within the template using a special syntax with the # symbol.

beginner

How do you declare a template reference variable for an input element?

You declare it by adding #variableName inside the input tag, for example: <input #myInput>. This lets you access the input element directly in the template.

intermediate

How can you use a template reference variable to get the value of an input field in Angular?

You can use the variable inside the template, for example: <button (click)="doSomething(myInput.value)">. This passes the current value of the input to the component method.

intermediate

Can template reference variables access Angular components as well as DOM elements?

Yes, if you assign a template reference variable to a component selector, you can access the component instance and call its methods or access its properties directly in the template.

beginner

What is the scope of a template reference variable in Angular templates?

The scope of a template reference variable is limited to the template where it is declared. It cannot be accessed in other templates or component classes directly.

How do you declare a template reference variable named 'inputBox' on an input element?

A <input #inputBox>

B <input ref='inputBox'>

C <input var='inputBox'>

D <input $inputBox>

Template reference variables are declared using the # symbol followed by the variable name inside the element tag.

What can a template reference variable NOT directly access?

A Component class properties

B Angular components

C DOM elements

D Template elements

Template reference variables cannot directly access component class properties; they access elements or component instances in the template.

Which of these is a valid use of a template reference variable in a button click event?

A <button (click)="submit(#inputRef.value)">

B <button (click)="submit(inputRef.value)">

C <button (click)="submit($inputRef.value)">

D <button (click)="submit(ref.inputRef.value)">

You use the variable name directly without # inside event bindings.

If you declare , what does compRef represent?

A The DOM element of my-comp

B A CSS class applied to my-comp

C A string with the component name

D The Angular component instance of my-comp

When used on a component selector, the template reference variable points to the component instance.

Where can you use a template reference variable declared in a template?

A Inside the component class

B Anywhere in the Angular app

C Only inside the same template

D In sibling components

Template reference variables are only accessible within the template where they are declared.

Explain how to create and use a template reference variable to get the value of an input field in Angular.

Think about how you can grab the input's current text without using component code.

Describe the difference between accessing a DOM element and an Angular component using template reference variables.

Consider what you get when you put #var on a normal HTML tag vs a component tag.