angular · crisbeto · Jun 13, 2025 · Jun 13, 2025 · Jun 13, 2025 · Jun 16, 2025
diff --git a/adev/src/content/guide/templates/expression-syntax.md b/adev/src/content/guide/templates/expression-syntax.md
@@ -47,27 +47,37 @@ For example, `@for` blocks make several local variables corresponding to informa
 
 Angular supports the following operators from standard JavaScript.
 
-| Operator              | Example(s)                               |
-| --------------------- | ---------------------------------------- |
-| Add / Concatenate     | `1 + 2`                                  |
-| Subtract              | `52 - 3`                                 |
-| Multiply              | `41 * 6`                                 |
-| Divide                | `20 / 4`                                 |
-| Remainder (Modulo)    | `17 % 5`                                 |
-| Exponentiation        | `10 ** 3`                                |
-| Parenthesis           | `9 * (8 + 4)`                            |
-| Conditional (Ternary) | `a > b ? true : false`                   |
-| And (Logical)         | `&&`                                     |
-| Or (Logical)          | `\|\|`                                   |
-| Not (Logical)         | `!`                                      |
-| Nullish Coalescing    | `possiblyNullValue ?? 'default'`         |
-| Comparison Operators  | `<`, `<=`, `>`, `>=`, `==`, `===`, `!==` |
-| Unary Negation        | `-x`                                     |
-| Unary Plus            | `+y`                                     |
-| Property Accessor     | `person['name']`                         |
-| typeof                | `typeof 42`                              |
-| void                  | `void 1`                                 |
-| in                    | `'model' in car`                         |
+| Operator                        | Example(s)                               |
+| ------------------------------- | ---------------------------------------- |
+| Add / Concatenate               | `1 + 2`                                  |
+| Subtract                        | `52 - 3`                                 |
+| Multiply                        | `41 * 6`                                 |
+| Divide                          | `20 / 4`                                 |
+| Remainder (Modulo)              | `17 % 5`                                 |
+| Exponentiation                  | `10 ** 3`                                |
+| Parenthesis                     | `9 * (8 + 4)`                            |
+| Conditional (Ternary)           | `a > b ? true : false`                   |
+| And (Logical)                   | `&&`                                     |
+| Or (Logical)                    | `\|\|`                                   |
+| Not (Logical)                   | `!`                                      |
+| Nullish Coalescing              | `possiblyNullValue ?? 'default'`         |
+| Comparison Operators            | `<`, `<=`, `>`, `>=`, `==`, `===`, `!==` |
+| Unary Negation                  | `-x`                                     |
+| Unary Plus                      | `+y`                                     |
+| Property Accessor               | `person['name']`                         |
+| typeof                          | `typeof 42`                              |
+| void                            | `void 1`                                 |
+| in                              | `'model' in car`                         |
+| Assignment                      | `a = b`                                  |
+| Addition Assignment             | `a += b`                                 |
+| Subtraction Assignment          | `a -= b`                                 |
+| Multiplication Assignment       | `a *= b`                                 |
+| Division Assignment             | `a /= b`                                 |
+| Remainder Assignment            | `a %= b`                                 |
+| Exponentiation Assignment       | `a **= b`                                |
+| Logical AND Assignment          | `a &&= b`                                |
+| Logical OR Assignment           | `a \|\|= b`                              |
+| Nullish Coalescing Assignment   | `a ??= b`                                |
 
 Angular expressions additionally also support the following non-standard operators:
 
@@ -84,13 +94,9 @@ NOTE: Optional chaining behaves differently from the standard JavaScript version
 | Operator              | Example(s)                        |
 | --------------------- | --------------------------------- |
 | All bitwise operators | `&`, `&=`, `~`, `\|=`, `^=`, etc. |
-| Assignment operators  | `=`                               |
 | Object destructuring  | `const { name } = person`         |
 | Array destructuring   | `const [firstItem] = items`       |
 | Comma operator        | `x = (x++, x)`                    |
-| in                    | `'model' in car`                  |
-| typeof                | `typeof 42`                       |
-| void                  | `void 1`                          |
 | instanceof            | `car instanceof Automobile`       |
 | new                   | `new Car()`                       |
 

diff --git a/packages/compiler-cli/linker/babel/src/ast/babel_ast_factory.ts b/packages/compiler-cli/linker/babel/src/ast/babel_ast_factory.ts
@@ -37,9 +37,13 @@ export class BabelAstFactory implements AstFactory<t.Statement, t.Expression> {
 
   createArrayLiteral = t.arrayExpression;
 
-  createAssignment(target: t.Expression, value: t.Expression): t.Expression {
+  createAssignment(
+    target: t.Expression,
+    operator: BinaryOperator,
+    value: t.Expression,
+  ): t.Expression {
     assert(target, isLExpression, 'must be a left hand side expression');
-    return t.assignmentExpression('=', target, value);
+    return t.assignmentExpression(operator, target, value);
   }
 
   createBinaryExpression(
@@ -52,6 +56,17 @@ export class BabelAstFactory implements AstFactory<t.Statement, t.Expression> {
       case '||':
       case '??':
         return t.logicalExpression(operator, leftOperand, rightOperand);
+      case '=':
+      case '+=':
+      case '-=':
+      case '*=':
+      case '/=':
+      case '%=':
+      case '**=':
+      case '&&=':
+      case '||=':
+      case '??=':
+        throw new Error(`Unexpected assignment operator ${operator}`);
       default:
         return t.binaryExpression(operator, leftOperand, rightOperand);
     }

diff --git a/packages/compiler-cli/linker/babel/test/ast/babel_ast_factory_spec.ts b/packages/compiler-cli/linker/babel/test/ast/babel_ast_factory_spec.ts
@@ -62,7 +62,7 @@ describe('BabelAstFactory', () => {
     it('should create an assignment node using the target and value expressions', () => {
       const target = expression.ast`x`;
       const value = expression.ast`42`;
-      const assignment = factory.createAssignment(target, value);
+      const assignment = factory.createAssignment(target, '=', value);
       expect(generate(assignment).code).toEqual('x = 42');
     });
   });

diff --git a/packages/compiler-cli/src/ngtsc/translator/src/api/ast_factory.ts b/packages/compiler-cli/src/ngtsc/translator/src/api/ast_factory.ts
@@ -33,9 +33,10 @@ export interface AstFactory<TStatement, TExpression> {
    * Create an assignment expression (e.g. `lhsExpr = rhsExpr`).
    *
    * @param target an expression that evaluates to the left side of the assignment.
+   * @param operator binary assignment operator that will be applied.
    * @param value an expression that evaluates to the right side of the assignment.
    */
-  createAssignment(target: TExpression, value: TExpression): TExpression;
+  createAssignment(target: TExpression, operator: BinaryOperator, value: TExpression): TExpression;
 
   /**
    * Create a binary expression (e.g. `lhs && rhs`).
@@ -317,7 +318,17 @@ export type BinaryOperator =
   | '||'
   | '+'
   | '??'
-  | 'in';
+  | 'in'
+  | '='
+  | '+='
+  | '-='
+  | '*='
+  | '/='
+  | '%='
+  | '**='
+  | '&&='
+  | '||='
+  | '??=';
 
 /**
  * The original location of the start or end of a node created by the `AstFactory`.

diff --git a/packages/compiler-cli/src/ngtsc/translator/src/translator.ts b/packages/compiler-cli/src/ngtsc/translator/src/translator.ts
@@ -45,6 +45,16 @@ const BINARY_OPERATORS = /* @__PURE__ */ new Map<o.BinaryOperator, BinaryOperato
   [o.BinaryOperator.NullishCoalesce, '??'],
   [o.BinaryOperator.Exponentiation, '**'],
   [o.BinaryOperator.In, 'in'],
+  [o.BinaryOperator.Assign, '='],
+  [o.BinaryOperator.AdditionAssignment, '+='],
+  [o.BinaryOperator.SubtractionAssignment, '-='],
+  [o.BinaryOperator.MultiplicationAssignment, '*='],
+  [o.BinaryOperator.DivisionAssignment, '/='],
+  [o.BinaryOperator.RemainderAssignment, '%='],
+  [o.BinaryOperator.ExponentiationAssignment, '**='],
+  [o.BinaryOperator.AndAssignment, '&&='],
+  [o.BinaryOperator.OrAssignment, '||='],
+  [o.BinaryOperator.NullishCoalesceAssignment, '??='],
 ]);
 
 export type RecordWrappedNodeFn<TExpression> = (node: o.WrappedNodeExpr<TExpression>) => void;
@@ -331,19 +341,23 @@ export class ExpressionTranslatorVisitor<TFile, TStatement, TExpression>
   }
 
   visitBinaryOperatorExpr(ast: o.BinaryOperatorExpr, context: Context): TExpression {
-    if (ast.operator === o.BinaryOperator.Assign) {
+    if (!BINARY_OPERATORS.has(ast.operator)) {
+      throw new Error(`Unknown binary operator: ${o.BinaryOperator[ast.operator]}`);
+    }
+
+    const operator = BINARY_OPERATORS.get(ast.operator)!;
+
+    if (ast.isAssignment()) {
       return this.factory.createAssignment(
         ast.lhs.visitExpression(this, context),
+        operator,
         ast.rhs.visitExpression(this, context),
       );
     }
 
-    if (!BINARY_OPERATORS.has(ast.operator)) {
-      throw new Error(`Unknown binary operator: ${o.BinaryOperator[ast.operator]}`);
-    }
     return this.factory.createBinaryExpression(
       ast.lhs.visitExpression(this, context),
-      BINARY_OPERATORS.get(ast.operator)!,
+      operator,
       ast.rhs.visitExpression(this, context),
     );
   }

diff --git a/packages/compiler-cli/src/ngtsc/translator/src/typescript_ast_factory.ts b/packages/compiler-cli/src/ngtsc/translator/src/typescript_ast_factory.ts
@@ -61,6 +61,16 @@ const BINARY_OPERATORS: Record<BinaryOperator, ts.BinaryOperator> = /* @__PURE__
   '+': ts.SyntaxKind.PlusToken,
   '??': ts.SyntaxKind.QuestionQuestionToken,
   'in': ts.SyntaxKind.InKeyword,
+  '=': ts.SyntaxKind.EqualsToken,
+  '+=': ts.SyntaxKind.PlusEqualsToken,
+  '-=': ts.SyntaxKind.MinusEqualsToken,
+  '*=': ts.SyntaxKind.AsteriskEqualsToken,
+  '/=': ts.SyntaxKind.SlashEqualsToken,
+  '%=': ts.SyntaxKind.PercentEqualsToken,
+  '**=': ts.SyntaxKind.AsteriskAsteriskEqualsToken,
+  '&&=': ts.SyntaxKind.AmpersandAmpersandEqualsToken,
+  '||=': ts.SyntaxKind.BarBarEqualsToken,
+  '??=': ts.SyntaxKind.QuestionQuestionEqualsToken,
 }))();
 
 const VAR_TYPES: Record<VariableDeclarationType, ts.NodeFlags> = /* @__PURE__ */ (() => ({
@@ -81,8 +91,12 @@ export class TypeScriptAstFactory implements AstFactory<ts.Statement, ts.Express
 
   createArrayLiteral = ts.factory.createArrayLiteralExpression;
 
-  createAssignment(target: ts.Expression, value: ts.Expression): ts.Expression {
-    return ts.factory.createBinaryExpression(target, ts.SyntaxKind.EqualsToken, value);
+  createAssignment(
+    target: ts.Expression,
+    operator: BinaryOperator,
+    value: ts.Expression,
+  ): ts.Expression {
+    return ts.factory.createBinaryExpression(target, BINARY_OPERATORS[operator], value);
   }
 
   createBinaryExpression(

diff --git a/packages/compiler-cli/src/ngtsc/translator/test/typescript_ast_factory_spec.ts b/packages/compiler-cli/src/ngtsc/translator/test/typescript_ast_factory_spec.ts
@@ -59,7 +59,7 @@ describe('TypeScriptAstFactory', () => {
         items: [target, value],
         generate,
       } = setupExpressions(`x`, `42`);
-      const assignment = factory.createAssignment(target, value);
+      const assignment = factory.createAssignment(target, '=', value);
       expect(generate(assignment)).toEqual('x = 42');
     });
   });

diff --git a/packages/compiler-cli/src/ngtsc/typecheck/src/expression.ts b/packages/compiler-cli/src/ngtsc/typecheck/src/expression.ts
@@ -85,6 +85,16 @@ const BINARY_OPS = new Map<string, ts.BinaryOperator>([
   ['|', ts.SyntaxKind.BarToken],
   ['??', ts.SyntaxKind.QuestionQuestionToken],
   ['in', ts.SyntaxKind.InKeyword],
+  ['=', ts.SyntaxKind.EqualsToken],
+  ['+=', ts.SyntaxKind.PlusEqualsToken],
+  ['-=', ts.SyntaxKind.MinusEqualsToken],
+  ['*=', ts.SyntaxKind.AsteriskEqualsToken],
+  ['/=', ts.SyntaxKind.SlashEqualsToken],
+  ['%=', ts.SyntaxKind.PercentEqualsToken],
+  ['**=', ts.SyntaxKind.AsteriskAsteriskEqualsToken],
+  ['&&=', ts.SyntaxKind.AmpersandAmpersandEqualsToken],
+  ['||=', ts.SyntaxKind.BarBarEqualsToken],
+  ['??=', ts.SyntaxKind.QuestionQuestionEqualsToken],
 ]);
 
 /**

diff --git a/packages/compiler-cli/src/ngtsc/typecheck/src/template_symbol_builder.ts b/packages/compiler-cli/src/ngtsc/typecheck/src/template_symbol_builder.ts
@@ -808,7 +808,7 @@ export class SymbolBuilder {
     // Also skipping SafePropertyReads as it breaks nullish coalescing not nullable extended diagnostic
     if (
       expression instanceof Binary &&
-      expression.operation === '=' &&
+      Binary.isAssignmentOperation(expression.operation) &&
       expression.left instanceof PropertyRead
     ) {
       withSpan = expression.left.nameSpan;

diff --git a/packages/compiler-cli/src/ngtsc/typecheck/src/type_check_block.ts b/packages/compiler-cli/src/ngtsc/typecheck/src/type_check_block.ts
@@ -3117,7 +3117,7 @@ class TcbExpressionTranslator {
       return targetExpression;
     } else if (
       ast instanceof Binary &&
-      ast.operation === '=' &&
+      Binary.isAssignmentOperation(ast.operation) &&
       ast.left instanceof PropertyRead &&
       ast.left.receiver instanceof ImplicitReceiver
     ) {

diff --git a/...ges/compiler-cli/src/ngtsc/typecheck/template_semantics/src/template_semantics_checker.ts b/...ges/compiler-cli/src/ngtsc/typecheck/template_semantics/src/template_semantics_checker.ts
@@ -77,7 +77,7 @@ class ExpressionsSemanticsVisitor extends RecursiveAstVisitor {
   }
 
   override visitBinary(ast: Binary, context: TmplAstNode): void {
-    if (ast.operation === '=' && ast.left instanceof PropertyRead) {
+    if (Binary.isAssignmentOperation(ast.operation) && ast.left instanceof PropertyRead) {
       this.checkForIllegalWriteInEventBinding(ast.left, context);
     } else {
       super.visitBinary(ast, context);

diff --git a/packages/compiler-cli/src/ngtsc/typecheck/test/type_check_block_spec.ts b/packages/compiler-cli/src/ngtsc/typecheck/test/type_check_block_spec.ts
@@ -75,6 +75,19 @@ describe('type check blocks', () => {
     expect(tcb('{{!(void a === "object")}}')).toContain('!(((void (((this).a))) === ("object")))');
   });
 
+  it('should handle assignment expressions', () => {
+    expect(tcb('<b (click)="a = b"></b>')).toContain('(((this).a)) = (((this).b));');
+    expect(tcb('<b (click)="a += b"></b>')).toContain('(((this).a)) += (((this).b));');
+    expect(tcb('<b (click)="a -= b"></b>')).toContain('(((this).a)) -= (((this).b));');
+    expect(tcb('<b (click)="a *= b"></b>')).toContain('(((this).a)) *= (((this).b));');
+    expect(tcb('<b (click)="a /= b"></b>')).toContain('(((this).a)) /= (((this).b));');
+    expect(tcb('<b (click)="a %= b"></b>')).toContain('(((this).a)) %= (((this).b));');
+    expect(tcb('<b (click)="a **= b"></b>')).toContain('(((this).a)) **= (((this).b));');
+    expect(tcb('<b (click)="a &&= b"></b>')).toContain('(((this).a)) &&= (((this).b));');
+    expect(tcb('<b (click)="a ||= b"></b>')).toContain('(((this).a)) ||= (((this).b));');
+    expect(tcb('<b (click)="a ??= b"></b>')).toContain('(((this).a)) ??= (((this).b));');
+  });
+
   it('should handle exponentiation expressions', () => {
     expect(tcb('{{a * b ** c + d}}')).toContain(
       '(((((this).a)) * ((((this).b)) ** (((this).c)))) + (((this).d)))',

diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/GOLDEN_PARTIAL.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/GOLDEN_PARTIAL.js
@@ -76,20 +76,18 @@ export class IdentityPipe {
     transform(value) {
         return value;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: IdentityPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: IdentityPipe, isStandalone: true, name: "identity" });
 }
-IdentityPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: IdentityPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-IdentityPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: IdentityPipe, isStandalone: true, name: "identity" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: IdentityPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'identity' }]
         }] });
 export class MyApp {
-    constructor() {
-        this.foo = { bar: 'baz' };
-    }
-}
-MyApp.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: MyApp, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "0.0.0-PLACEHOLDER", type: MyApp, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+    foo = { bar: 'baz' };
+    number = 1;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: MyApp, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "0.0.0-PLACEHOLDER", type: MyApp, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
     {{ 1 + 2 }}
     {{ (1 % 2) + 3 / 4 * 5 ** 6 }}
     {{ +1 }}
@@ -100,7 +98,17 @@ MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "0.0.0-
     {{ void 'test' }}
     {{ (-1) ** 3 }}
     {{ 'bar' in foo }}
+    <button (click)="number += 1"></button>
+    <button (click)="number -= 1"></button>
+    <button (click)="number *= 1"></button>
+    <button (click)="number /= 1"></button>
+    <button (click)="number %= 1"></button>
+    <button (click)="number **= 1"></button>
+    <button (click)="number &&= 1"></button>
+    <button (click)="number ||= 1"></button>
+    <button (click)="number ??= 1"></button>
   `, isInline: true, dependencies: [{ kind: "pipe", type: IdentityPipe, name: "identity" }] });
+}
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: MyApp, decorators: [{
             type: Component,
             args: [{
@@ -115,6 +123,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDE
     {{ void 'test' }}
     {{ (-1) ** 3 }}
     {{ 'bar' in foo }}
+    <button (click)="number += 1"></button>
+    <button (click)="number -= 1"></button>
+    <button (click)="number *= 1"></button>
+    <button (click)="number /= 1"></button>
+    <button (click)="number %= 1"></button>
+    <button (click)="number **= 1"></button>
+    <button (click)="number &&= 1"></button>
+    <button (click)="number ||= 1"></button>
+    <button (click)="number ??= 1"></button>
   `,
                     imports: [IdentityPipe],
                 }]
@@ -133,6 +150,7 @@ export declare class MyApp {
     foo: {
         bar?: string;
     };
+    number: number;
     static ɵfac: i0.ɵɵFactoryDeclaration<MyApp, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MyApp, "ng-component", never, {}, {}, never, never, true, never>;
 }

diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/TEST_CASES.json b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/TEST_CASES.json
@@ -19,7 +19,7 @@
     {
       "description": "should handle binary and unary operators",
       "compilerOptions": {
-        "target": "es2020"
+        "target": "es2022"
       },
       "inputFiles": ["operators.ts"],
       "expectations": [

diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/operators.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/operators.ts
@@ -19,9 +19,19 @@ export class IdentityPipe {
     {{ void 'test' }}
     {{ (-1) ** 3 }}
     {{ 'bar' in foo }}
+    <button (click)="number += 1"></button>
+    <button (click)="number -= 1"></button>
+    <button (click)="number *= 1"></button>
+    <button (click)="number /= 1"></button>
+    <button (click)="number %= 1"></button>
+    <button (click)="number **= 1"></button>
+    <button (click)="number &&= 1"></button>
+    <button (click)="number ||= 1"></button>
+    <button (click)="number ??= 1"></button>
   `,
   imports: [IdentityPipe],
 })
 export class MyApp {
   foo: {bar?: string} = {bar: 'baz'};
+  number = 1;
 }