Declaring Variables in Angular Templates

In Angular, you can declare variables directly within your templates to make your code more readable and efficient. This technique is particularly useful when working with structural directives like ngIf or when you need to alias complex expressions.

Using Structural Directives

Angular’s structural directives, such as *ngIf, provide a way to conditionally include or exclude parts of the template based on certain conditions. One of the less commonly known features of these directives is their ability to declare variables within the template itself.

Here’s an example using *ngIf:

<div *ngIf="condition as variable">
  <span>{{variable}}</span>
</div>

In this example, if condition evaluates to true, then variable will be set to the value of condition, and the span element will display that value. This pattern is particularly useful for simplifying complex logic within your templates.

Another structural directive you can use in a similar manner is *ngFor. While not as common for variable declaration due to its primary purpose being iteration, it shows the flexibility Angular provides:

<div *ngFor="let item of items">
  <span>{{item}}</span>
</div>

Creating Custom Directives

If you find yourself frequently needing a way to declare variables in your templates outside of what structural directives offer, you might consider creating a custom directive. Here’s an example of how you could implement such a directive:

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@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 custom directive, you can declare variables in your templates like so:

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

Using ng-container for Variable Declaration

Another approach to declaring variables without adding unnecessary elements to the DOM is by using ng-container. This element is removed from the DOM after compilation, making it perfect for holding structural directives and their declared variables:

<ng-container *ngIf="methodName(parameters) as respObject">
  {{respObject.name}}
</ng-container>

And in your component:

methodName(parameters: any): any {
  return {name: 'Test name'};
}

Conclusion

Declaring variables within Angular templates can significantly enhance the readability and maintainability of your code. Whether through the use of structural directives like *ngIf, creating custom directives, or leveraging ng-container for cleaner syntax, Angular provides a flexible framework for managing complex logic directly in your templates.

Remember, each approach has its own set of use cases and might be more suitable depending on the specific requirements of your project. Understanding these techniques can empower you to write more efficient and readable code.