Template variables are a simple way to reference DOM elements or directives inside your template, allowing you to use their values or manipulate them elsewhere in your component.

In this article, we will break down the syntax, scope, and use cases of template variables, demonstrating how they can be used effectively.

1. Declaring a Template Variable

To declare a template variable in Angular, you use the # symbol, followed by a variable name. You can use this variable to reference DOM elements like inputs, buttons, or even Angular components.

Example:

<input #phone placeholder="Enter your phone number" />

In this case, the #phone variable refers to the element.

2. Using Template Variables

Once declared, you can use the template variable elsewhere in your template. For example, you can access the value of the input element and pass it to a function when a button is clicked.

Example:

<input #phone placeholder="Enter your phone number" />
<button (click)="callPhone(phone.value)">Call</button>

In the above example, the template variable phone refers to the element.

When you click the button, the value of the input (phone.value) is passed to the callPhone() function in your component.

How Angular Assigns Values to Template Variables

· DOM Element: If you declare a variable on an HTML tag like , the variable refers to that HTML element.

· Component: If you declare it on a component, it refers to the instance of that component, allowing you to access its public methods and properties..

Example:

You can also use template reference variables to interact with child components. For instance, if you have a video player component, you might want to control it (play, pause, etc.) from the parent template.

<!-- VideoPlayerComponent has methods like play() and pause() -->
<app-video-player #videoPlayer></app-video-player>
<button (click)="videoPlayer.play()">Play</button>
<button (click)="videoPlayer.pause()">Pause</button>

· Directive (like ngModel): If you declare a variable and specify a name, such as #form=”ngForm”, the variable refers to the directive instance.

Example:

<form #itemForm="ngForm" >
  <label for="name">Name</label>
  <input
    type="text"
    id="name"
    name="name"
    ngModel
    required
    minlength="3"
  />
  <div *ngIf="!itemForm.form.valid">
    Name is required and must be at least 3 characters long.
  </div>
</form>

Template Variable Scope

Template variables are scoped to the area where they are declared, similar to how variables in JavaScript or TypeScript are scoped..

If you declare a template variable inside an *ngIf or *ngFor, it will only be available in that scope.

Example:

<input #ref1 type="text" />
<span>{{ ref1.value }}</span>

This works because both the input and the span are in the same scope. But if you declare the input inside an *ngIf, it will be limited to that block.

<div *ngIf="true">
  <input #ref2 type="text" />
</div>
<span>{{ ref2?.value }}</span>
<!-- This won't work because ref2 is in a different scope -->

The span cannot access ref2 because the #ref2 variable is inside the **/*ngIf **block, which creates a separate scope.

Use Cases

Common use cases include:
· Accessing form fields for validation: Template variables can be used to easily reference form elements and check their validity.

· Interacting with child components: You can control child components directly from the parent template by referencing the component instance with a template variable.

· DOM manipulation: Template variables allow you to interact with DOM elements, such as retrieving their values or triggering focus.

· Managing dynamically rendered elements: When working with dynamically rendered elements (e.g., using *ngIf or *ngFor), template variables help manage their state.

Conclusion

Template variables in Angular are a simple but powerful feature that allows direct interaction with DOM elements, components, and directives from the template. By understanding their syntax, scope, and various use cases, you can enhance your Angular applications by reducing complexity in your component class while improving template interaction.