Angular -- Template Variables

<input type="text" id="item_input #item>

#item is an example of a template variable, used to capture the user input of <input> element.

Template variables help you use data from one part of a template in another part of the template.

• Syntax: hash (#) character + variable name

A template variable can refer to the following:

• A DOM element within a template
• A directive
• An element
• TemplateRef
• A web component

Refering value

• What value is stored in a template variable?

Answer: 

How Angular assigns values to template variableshttps://angular.io/guide/template-reference-variables#how-angular-assigns-values-to-template-variables

DOM Element

• i.e. Declared in an HTML tag
• Just like the previous example: <input ... #item>
• In this type of situation, the value is the input HTML element itself.

Component

• i.e. Declared in a component tag
• e.g. <app-child #child>
• Here the #child captures the child component as a whole
• Say, you want to display the "item" field in the child component:
  • In parent component: <p> {{child.item}} </p> OR

  • <input [value]="child.item">

• What is the type of the template variable?
  • Answer:
  • Angularhttps://angular.io/guide/template-reference-variables#default-reference-type-without-assigned-value

Variable scope

• If declared inside *ngIf, *ngFor, then it's scoped inside that structural directive
  • On the other hand, if declared outside, then it can be used inside other stuctural directives

Template input vaiable

• A way to declare temporary limited scope variables
• Format: let-XXX

Angular template variableshttps://angular.io/guide/template-reference-variables#template-input-variable