Angular - Template Variables

---

---

What are Template Variables?

Template variables are variables available in the context of template. Angular does not allow the developer to create a new variable in the template. Instead, it allows new variables to be passed into the template through a component or directive instance. Also, it allows to declare a variable in the template and refers to any of the existing elements available in the template.

Let us learn more about template variables in this chapter.

Types of Template Variables

There are two types of template variables −

• Template input variable: Template input variables are passed into the template either through component or directive instance.

• Template reference variable: Template reference variables are declared in the template itself and refer to the existing element in the template.

Template Input Variable

Template input variables are variables passed into the template and available in the context of template. They are passed into the template through multiple channels. They are as follows:

• Component: Component exposes all its public variables/properties to it's template

• Directive: Directive exposes selective variables into the template during its execution. For example, ngFor exposes index and current looping variable to the template as shown below,

<ul>
   <ng-template ngFor let-user let-i="index" [ngForOf]="users">
      <li>User {{i}}: {{user.name}}
   </ng-template>
</ul>

Here,

• users is template input variable exposed by component.

• user and i are template input variables exposed by ngFor directive.

Template Reference Variable

The syntax to declare a template reference variables is #var (# along with variable name). Angular allows the variable to be declared as attributes of an element available in the template. The type and value of the template reference variable depend on where it is declared.

1. If a variable is declared inside an element, then it refers to the HTML element.

<button #btn>Click Here</button>

Here, btn refers to the button object of type HtmlButtonElement

2. If a variable is declared inside a component, then it refers to the component instance.

<app-comp #mycomp></app-comp>

Here, mycomp refers to the component instance and can access the internal of the referenced component.

3. If a variable is declared inside a template (ng-template, a tag used to create template within a template), then it refers to the instance of the template.

<ng-template #mytemplate>
   <div>Hi, I am template within the template</div>
</ng-template>

Here, mytemplate refers to the instance of the template.

4. If a variable is declared inside a custom web component, then it refers to the custom HTML element.

<my-card #mycard>Click Here</my-card>

Here, mycard refers to the custom web component, my-card

Let us see how to create a template reference variable, firstname to refer to an input element as shown below −

<input #firstname id="firstname" type="text" name="firstname" value="John" />

Here,

• firstname is the template reference variable

• firstname represents the instance of HtmlInputElement element. HtmlInputElement is a type in DOM to represent the input element.

• firstname can access all properties and methods of HtmlInputElement element

The template reference variable can be used in template statement and text interpolation.

Example

Let us create an application to show the value entered by user in an input box to a span element using pure template reference variable concept. The application will provide a button for the user to fire the process of accessing the input box value and show it in the span element.

Step 1: Create a new application using angular CLI as shown below −

$ ng new my-app

Step 2: Create a component, MyTemplateRefVarSample using angular CLI as shown below −

$ ng generate component MyTemplateRefVarSample
CREATE src/app/my-template-ref-var-sample/my-template-ref-var-sample.component.css (0 bytes)
CREATE src/app/my-template-ref-var-sample/my-template-ref-var-sample.component.html (41 bytes)
CREATE src/app/my-template-ref-var-sample/my-template-ref-var-sample.component.spec.ts (675 bytes)
CREATE src/app/my-template-ref-var-sample/my-template-ref-var-sample.component.ts (278 bytes)

Step 3: Next, open the component template file, my-template-ref-var-sample.component.html and add an input element

<input type="text" id="firstname" name="firstname" #source />

Here, source is the template variable refering the input element

Step 4: Next, add a span element in the template

<input type="text" id="firstname" name="firstname" #source /> 
<span #target></span>

Here, target is the template variable referring the target span element.

Step 5: Next, add a button in the template

<input type="text" id="firstname" name="firstname" #source /> 
<span #target></span>

<div style="padding-top: 5px;">
   <button>Show</button>
</div>

Here, the button is used to fire the event and get the value entered by user in the firstname input element to set it into span element

Step 6: Next, add click event using property binding and write logic to set the value of input element to span element.

<input type="text" id="firstname" name="firstname" #source /> 
<span #target></span>

<div style="padding-top: 5px;">
   <button (click)="target.innerText = source.value;">Show</button>
</div>

Here, the click event has a single template statement, which will access the value entered by user in input element through value property of source object and set it into the target element, span using innerText property of target object.

Step 7: Next, open the app components template file, src/app/app.component.html and add our component as shown below −

<app-my-template-ref-var-sample />

Step 8: Finally, run the application and check whether the button is working fine.

Template reference variable with a value

In general, a template reference variable will only declare a variable inside the element to be referred.

<form #formVar>
   <!-- form information -->
</form>

Here, the formVar represents the object of type HtmlFormElement. But, in some cases, it can include value as well. If it includes value, then the value is interrupted as directive or component with exportAs property matching the set value.

To better understand the concept, let us change the above form to include ngForm as value.

<form #formVar="ngForm">
   <!-- form information -->
</form>

ngForm is a directive provided by angular team to support form programming. Here, the formVar refers to an instance of ngForm directive instead of HtmlFormElement. formVar can access properties and methods (like formVar.form.valid) of ngForm and do better form programming.

Summary

Template variables are simple to use in the angular framework. It is minimal and easy to understand and covers all aspects of client-side programming.