How to declare a variable in a template in Angular

javascript

template-engineering

angular-directives

type-safety

byAlex Kataev·Sep 26, 2024

You can declare a template variable in Angular using class properties or the *ngIf directive with an alias.

@Component({
  selector: 'my-hero',
  template: `<div *ngIf="hero as h">{{ h.name }} can fly: {{ h.canFly }}</div>`
})
export class HeroComponent {
  // Our hero, valiant Windstorm!
  hero = {name: 'Windstorm', canFly: true};
}

By assigning hero to h, we bring it to life within the current template's context.

Crafting your *ngVar directive

Creating your own *ngVar directive is a handy way to declare and assign variables directly in your templates:

Create an NgVarDirective that extends Angular's template syntax.
Give it the *ngAs syntax for declarative flavor.
Beef it up with Angular's type safety features using ngTemplateGuard_ngVar and ngTemplateContextGuard<T>.
Style it neatly with ng-container, and say goodbye to annoying wrapper elements.

Strengthen your type safety by determining your variables' types via a static field or using ngVarContext for a precise context type.

Going async with *ngFor and pipes

Creating asynchronous data binding? Fuse the *ngFor directive with the async pipe for smooth sailing with observable data streams.

Need a sleek way to assign variables within your templates? The knight in shining armor is *ngLet directive, and it has the syntax: *ngLet="'originalVariable' as newVariable".

Type safety strengthened

Don't let type safety fall by the wayside. Bind expressions to your declared variables using TypeScript's key features to maintain strict typing. Declare a ngVarContext<T> class that outlines the type of context data that should flow into your templates.

With the context object, you can breathe life into your components with dynamic expressions. Now your templates are precise, efficient, and won't clutter up your component class.

ng-template and ngTemplateOutletContext, the dynamic duo

Complex value structures got you down? Use ng-template to your advantage, along with ngTemplateOutletContext. Now, you can pass values, binding expressions, or even methods as part of the context object.

Reduce your keystrokes when binding data with the $implicit property in your context object.

Bounding through loops and handling async data

Combine your variable declaring prowess with loops and async data to dynamically display your data. This might include implementing *ngFor with an async pipe for lists with observable data sources.

Need to pass your well-crafted variables to custom directives? Use the exportAs feature of VarDirective and create user-friendly references in your templates.

Dancing with Angular template syntax

Angular's dance floor, the template syntax, has room for all your moves. By exploiting *ngVar directive, *ngLet, and other *ng directives, your templates will sashay smoothly along with your data flow.

And remember, even with all this smooth dance, keep an eye on those caveats like scope and performance.

explain-codes / Javascript / How to declare a variable in a template in Angular

Linked

Angularjs ngClass conditional



Using ngIf without an extra element in Angular 2



*ngif else if in template



What to use in place of ::ng-deep



Losing scope when using ng-include