Angular’s New Assignment Operators in Templates

Introduction

Angular has introduced a new feature starting from 20.1.0-next.3 that allows developers to use assignment operators directly in template expressions. This enhancement brings more flexibility and conciseness to Angular templates, enabling you to perform assignments and calculations in a single expression.

The New Feature in Angular Templates

Previously, Angular templates only supported basic expressions and method calls. With this new feature, you can now use assignment operators directly in event bindings and other template expressions, making your code more concise and expressive.

Supported Assignment Operators

Addition Assignment (+=)

The addition assignment operator adds the right operand to the left operand and assigns the result to the left operand.

@Component({
  template: '<button (click)="a += b += c"></button>',
})
class TestComponent {
  a = 2;
  b = 3;
  c = 4;
}

Subtraction Assignment (-=)

The subtraction assignment operator subtracts the right operand from the left operand and assigns the result to the left operand.

@Component({
  template: '<button (click)="a -= b -= c"></button>',
})
class TestComponent {
  a = 2;
  b = 3;
  c = 4;
}

Multiplication Assignment (*=)

The multiplication assignment operator multiplies the left operand by the right operand and assigns the result to the left operand.

@Component({
  template: '<button (click)="a *= b *= c"></button>',
})
class TestComponent {
  a = 2;
  b = 3;
  c = 4;
}

Division Assignment (/=)

The division assignment operator divides the left operand by the right operand and assigns the result to the left operand.

@Component({
  template: '<button (click)="a /= b /= c"></button>',
})
class TestComponent {
  a = 4;
  b = 8;
  c = 16;
}

Remainder Assignment (%=)

The remainder assignment operator divides the left operand by the right operand and assigns the remainder to the left operand.

@Component({
  template: '<button (click)="a %= b %= c"></button>',
})
class TestComponent {
  a = 4;
  b = 3;
  c = 2;
}

Exponentiation Assignment (**=)

The exponentiation assignment operator raises the left operand to the power of the right operand and assigns the result to the left operand.

@Component({
  template: '<button (click)="a **= b **= c"></button>',
})
class TestComponent {
  a = 0.5;
  b = 2;
  c = 3;
}

Logical AND Assignment (&&=)

The logical AND assignment operator assigns the right operand to the left operand only if the left operand is truthy.

@Component({
  template: '<button (click)="a &&= b"></button>',
})
class TestComponent {
  a = 0;
  b = 2;
}

Logical OR Assignment (||=)

The logical OR assignment operator assigns the right operand to the left operand only if the left operand is falsy.

@Component({
  template: '<button (click)="a ||= b"></button>',
})
class TestComponent {
  a = 0;
  b = 2;
}

Nullish Coalescing Assignment (??=)

The nullish coalescing assignment operator assigns the right operand to the left operand only if the left operand is null or undefined.

@Component({
  template: '<button (click)="a ??= b"></button>',
})
class TestComponent {
  a: number | null = 0;
  b = 1;
}

Real-World Use Cases

Counter Components

@Component({
  template: `
    <div>Count: {{ count }}</div>
    <button (click)="count += 1">Increment</button>
    <button (click)="count -= 1">Decrement</button>
    <button (click)="count *= 2">Double</button>
  `,
})
class CounterComponent {
  count = 0;
}

Form Validation

@Component({
  template: `
    <input [class.error]="hasError" (blur)="hasError ||= !isValid()" />
     @if(hasError) {
       <p>Please enter a valid value</p>
     }

  `,
})
class FormComponent {
  hasError = false;
}

Toggle States

@Component({
  template: `
    <button (click)="isVisible &&= false">Hide</button>
    <button (click)="isVisible ||= true">Show</button>

    @if(isVisible) {
      <div>Content is visible</div>
    }

  `,
})
class ToggleComponent {
  isVisible = true;
}

This feature requires Angular version that supports assignment operators in templates. Make sure you’re using a compatible version of Angular.

Conclusion

Angular’s support for assignment operators in templates is a welcome addition that brings more flexibility and expressiveness to template syntax. While it should be used judiciously, it provides a powerful tool for creating more concise and readable Angular applications.

The feature supports all major assignment operators, from basic arithmetic (+=, -=, *=, /=, %=) to advanced logical operators (&&=, ||=, ??=), making it a comprehensive solution for various use cases.

Follow me on Medium or Twitter to read more about Angular and JS!