How to declare a variable in a template in Angular

Update

We can just create directive like *ngIf and call it *ngVar

ng-var.directive.ts

@Directive({    selector: '[ngVar]',})export class VarDirective {    @Input()    set ngVar(context: unknown) {        this.context.$implicit = this.context.ngVar = context;        if (!this.hasView) {            this.vcRef.createEmbeddedView(this.templateRef, this.context);            this.hasView = true;        }    }    private context: {        $implicit: unknown;        ngVar: unknown;    } = {        $implicit: null,        ngVar: null,    };    private hasView: boolean = false;    constructor(        private templateRef: TemplateRef<any>,        private vcRef: ViewContainerRef    ) {}}

with this *ngVar directive we can use the following

<div *ngVar="false as variable">      <span>{{variable | json}}</span></div>

or

<div *ngVar="false; let variable">    <span>{{variable | json}}</span></div>

or

<div *ngVar="45 as variable">    <span>{{variable | json}}</span></div>

or

<div *ngVar="{ x: 4 } as variable">    <span>{{variable | json}}</span></div>

Plunker Example Angular4 ngVar

See also

• Where does Angular 4 define "as local-var" behavior for *ngIf?

Original answer

Angular v4

1. div + ngIf + let

   {{variable.a}} {{variable.b}}

2. div + ngIf + as

view

<div *ngIf="{ a: 1, b: 2, c: 3 + x } as variable">  <span>{{variable.a}}</span>  <span>{{variable.b}}</span>  <span>{{variable.c}}</span></div>

component.ts

export class AppComponent {  x = 5;}

3. If you don't want to create wrapper like div you can use ng-container

view

<ng-container *ngIf="{ a: 1, b: 2, c: 3 + x } as variable">  <span>{{variable.a}}</span>  <span>{{variable.b}}</span>  <span>{{variable.c}}</span></ng-container>

As @Keith mentioned in comments

this will work in most cases but it is not a general solution since itrelies on variable being truthy

See update for another approach.

Ugly, but:

<div *ngFor="let a of [aVariable]">  <span>{{a}}</span></div>

When used with async pipe:

<div *ngFor="let a of [aVariable | async]">  <span>{{a.prop1}}</span>  <span>{{a.prop2}}</span></div>

You can declare variables in html code by using a template element in Angular 2 or ng-template in Angular 4+.

Templates have a context object whose properties can be assigned to variables using let binding syntax. Note that you must specify an outlet for the template, but it can be a reference to itself.

<ng-template #selfie [ngTemplateOutlet]="selfie"    let-a="aVariable" [ngTemplateOutletContext]="{ aVariable: 123 }">  <div>    <span>{{a}}</span>  </div></ng-template><!-- Output<div>  <span>123</span></div>-->

You can reduce the amount of code by using the $implicit property of the context object instead of a custom property.

<ng-template #t [ngTemplateOutlet]="t"    let-a [ngTemplateOutletContext]="{ $implicit: 123 }">  <div>    <span>{{a}}</span>  </div></ng-template>

The context object can be a literal object or any other binding expression. Other valid examples:

<!-- Use arbitrary binding expressions --><ng-template let-sum [ngTemplateOutletContext]="{ $implicit: 1 + 1 }"><!-- Use pipes --><ng-template let-formatPi [ngTemplateOutletContext]="{ $implicit: 3.141592 | number:'3.1-5' }"><!-- Use the result of a public method of your component --><ng-template let-root [ngTemplateOutletContext]="{ $implicit: sqrt(2116) }"><!--    You can create an alias for a public property of your component:    anotherVariable: number = 123; --><ng-template let-aliased [ngTemplateOutletContext]="{ $implicit: anotherVariable }"><!--    The entire context object can be bound from a public property:    ctx: { first: number, second: string } = { first: 123, second: "etc" }--><ng-template let-a="first" let-b="second" [ngTemplateOutletContext]="ctx">