Template reference variables 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 instance directly in the template. It is declared with a # symbol and can be used to read properties or call methods.

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 variable can then be used to access the input's value or methods.

intermediate

Can template reference variables access component properties or methods?

Yes, if the variable references a component or directive, you can access its public properties and methods directly in the template using the variable.

intermediate

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

The scope of a template reference variable is limited to the template where it is declared. It cannot be accessed outside that template or in the component class directly.

beginner

How can you use a template reference variable to get the value of an input on a button click?

You can declare a variable on the input, e.g., <input #myInput>, then use it in a button click event like (click)="alert(myInput.value)" to show the current input value.

How do you declare a template reference variable in Angular?

A Using # followed by the variable name inside the template

B Using $ followed by the variable name inside the component class

C Using @ followed by the variable name in the decorator

D Using & followed by the variable name in the template

Template reference variables are declared with # inside the template to reference elements or components.

What can a template reference variable NOT do?

A Access DOM element properties

B Call methods on a referenced component

C Be used inside the same template

D Be accessed in the component's TypeScript class directly

Template reference variables exist only in the template and cannot be accessed directly in the component's TypeScript code.

Which of these is a valid use of a template reference variable?

A <input #userInput><button (click)="console.log(userInput.value)">Log</button>

B <input $userInput><button (click)="console.log(userInput.value)">Log</button>

C <input @userInput><button (click)="console.log(userInput.value)">Log</button>

D <input &userInput><button (click)="console.log(userInput.value)">Log</button>

Only # is the correct syntax to declare a template reference variable.

If you have , how do you call a method 'doSomething()' on the child component from the template?

A (click)="doSomething(child)"

B (click)="child.doSomething()"

C (click)="#child.doSomething()"

D (click)="child#doSomething()"

You use the variable name directly to call methods on the referenced component.

What is the scope of a template reference variable?

A Accessible in the component class and template

B Global across the entire Angular app

C Only inside the template where it is declared

D Only inside the component class

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

Explain what a template reference variable is and how you use it in Angular templates.

Think about how you can grab an element or component in the template without using code in the class.

Describe a practical example where a template reference variable helps in handling user input in Angular.

Imagine you want to show or use the value typed by the user immediately when they click a button.