Variables

Local Template Variables @let

The @let syntax allow you to define a local variable and re-use it across a template.

These variables cannot be reassigned after declaration.

Angular will automatically keep the variable's value up-to-date with the given expression.

But programatically trying to change their values will not work.

@let name = 'string-text';
@let pi = 3.1459;
@let coords = { x: 50, y: 10 };
@let user = user$ | async;

Once declared you may access its value like:

@let user = user$ | async;

@if (user) {
    <h1>{{ user.name }}</h1>
}

Scope

@let declarations are scoped to the current view and its decendants.

Angular creates a new view at component boundaries and wherever a template might contain dynamic content, such as control flow blocks, @defer blocks, or structural directives.

@let declarations are not hoisted, and cannot be accessed by parent views or siblings.

Template Reference Variables

These variables give you a way to declare a variable that references a value from an element in your template. (Mostly used for referencing)

They can refer to:

• DOM elements within the template.

• An Angular component or directive.

• A TemplateRef from an ng-template.

Template variables are scoped to the template that declares them.

Create them with an attribute that starts with #.

<input #thisInput (input)="analyzeValue(thisInput.value)" />

Assigned Values

Angular assigns a value to template variables based on the element on which the variable is declared.

(Ex.: If declaring a variable on an Angular component, the variable refers to the component instance.)

(Ex.: If declaring a variable on a DOM element, the variable refers to the HTMLElement instance.)

Reference to an Angular Directive

If the variable specifies a name on the right-side, like #var="ngModel", the variable refers to the directive with matching exportAs name.

Angular directives may have an exportAs property that defines a name by which the directive can be referenced in a template.

@Directive({
  selector: '[dragDrop]',
  exportAs: 'dragDrop',
})
export class DragDrop { ... }

<section dragDrop #firstZone="dragDrop"> ... </section>

You cannot refer to a directive that does not specify an exportAs name.