feat(compiler): support the in keyword in Binary expression (angular#58432)

JeanMeche · pkozlowski-opensource · commit 1b8e7ab9fe46 · 2025-04-22T21:44:12.000+02:00
This commit adds the support for the `in` keyword as a relational operator, with the same precedence as the other relational operators (<,>, <=, >=) BREAKING CHANGE: 'in' in an expression now refers to the operator PR Close angular#58432
diff --git a/adev/src/content/guide/templates/expression-syntax.md b/adev/src/content/guide/templates/expression-syntax.md
@@ -67,6 +67,7 @@ Angular supports the following operators from standard JavaScript.
 | Property Accessor     | `person['name']`                         |
 | typeof                | `typeof 42`                              |
 | void                  | `void 1`                                 |
+| in                    | `'model' in car`                         |
 
 Angular expressions additionally also support the following non-standard operators:
 
@@ -88,6 +89,8 @@ Angular expressions additionally also support the following non-standard operato
 | 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/src/ngtsc/translator/src/api/ast_factory.ts b/packages/compiler-cli/src/ngtsc/translator/src/api/ast_factory.ts
@@ -316,7 +316,8 @@ export type BinaryOperator =
   | '!=='
   | '||'
   | '+'
-  | '??';
+  | '??'
+  | '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
@@ -44,6 +44,7 @@ const BINARY_OPERATORS = new Map<o.BinaryOperator, BinaryOperator>([
   [o.BinaryOperator.Plus, '+'],
   [o.BinaryOperator.NullishCoalesce, '??'],
   [o.BinaryOperator.Exponentiation, '**'],
+  [o.BinaryOperator.In, 'in'],
 ]);
 
 export type RecordWrappedNodeFn<TExpression> = (node: o.WrappedNodeExpr<TExpression>) => void;
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
@@ -60,6 +60,7 @@ const BINARY_OPERATORS: Record<BinaryOperator, ts.BinaryOperator> = {
   '||': ts.SyntaxKind.BarBarToken,
   '+': ts.SyntaxKind.PlusToken,
   '??': ts.SyntaxKind.QuestionQuestionToken,
+  'in': ts.SyntaxKind.InKeyword,
 };
 
 const VAR_TYPES: Record<VariableDeclarationType, ts.NodeFlags> = {
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,7 @@ const BINARY_OPS = new Map<string, ts.BinaryOperator>([
   ['&', ts.SyntaxKind.AmpersandToken],
   ['|', ts.SyntaxKind.BarToken],
   ['??', ts.SyntaxKind.QuestionQuestionToken],
+  ['in', ts.SyntaxKind.InKeyword],
 ]);
 
 /**
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
@@ -82,6 +82,11 @@ describe('type check blocks', () => {
     expect(tcb('{{a ** b ** c}}')).toContain('((((this).a)) ** ((((this).b)) ** (((this).c))))');
   });
 
+  it('should handle "in" expressions', () => {
+    expect(tcb(`{{'bar' in {bar: 'bar'} }}`)).toContain(`(("bar") in ({ "bar": "bar" }))`);
+    expect(tcb(`{{!('bar' in {bar: 'bar'}) }}`)).toContain(`!((("bar") in ({ "bar": "bar" })))`);
+  });
+
   it('should handle attribute values for directive inputs', () => {
     const TEMPLATE = `<div dir inputA="value"></div>`;
     const DIRECTIVES: TestDeclaration[] = [
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
@@ -99,6 +99,7 @@ MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "0.0.0-
     {{ typeof foo?.bar | identity }}
     {{ void 'test' }}
     {{ (-1) ** 3 }}
+    {{ 'bar' in foo }}
   `, 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,
@@ -113,6 +114,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDE
     {{ typeof foo?.bar | identity }}
     {{ void 'test' }}
     {{ (-1) ** 3 }}
+    {{ 'bar' in foo }}
   `,
                     imports: [IdentityPipe],
                 }]
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
@@ -18,6 +18,7 @@ export class IdentityPipe {
     {{ typeof foo?.bar | identity }}
     {{ void 'test' }}
     {{ (-1) ** 3 }}
+    {{ 'bar' in foo }}
   `,
   imports: [IdentityPipe],
 })
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/operators_template.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/operators_template.js
@@ -7,12 +7,13 @@ template: function MyApp_Template(rf, $ctx$) {
 		1 + 2, " ", 
 		1 % 2 + 3 / 4 * 5 ** 6, " ", 
 		+1, " ", 
-		typeof i0.ɵɵpureFunction0(11, _c0) === "object", " ", 
-		!(typeof i0.ɵɵpureFunction0(12, _c0) === "object"), " ", 
+		typeof i0.ɵɵpureFunction0(12, _c0) === "object", " ", 
+		!(typeof i0.ɵɵpureFunction0(13, _c0) === "object"), " ", 
 		typeof (ctx.foo == null ? null : ctx.foo.bar) === "string", " ", 
-		i0.ɵɵpipeBind1(1, 9, typeof (ctx.foo == null ? null : ctx.foo.bar)), " ",
+		i0.ɵɵpipeBind1(1, 10, typeof (ctx.foo == null ? null : ctx.foo.bar)), " ",
 		void "test", " ",
-		(-1) ** 3, " "
+		(-1) ** 3, " ",
+		"bar" in ctx.foo, " "
 	  ]);	
 	}
   }
diff --git a/packages/compiler-cli/test/ngtsc/template_typecheck_spec.ts b/packages/compiler-cli/test/ngtsc/template_typecheck_spec.ts
@@ -807,6 +807,25 @@ runInEachFileSystem(() => {
       expect(diags[0].messageText).toContain(`This comparison appears to be unintentional`);
     });
 
+    it('should error on invalid "in" binary expressions', () => {
+      env.write(
+        'test.ts',
+        `
+        import {Component} from '@angular/core';
+
+        @Component({
+          template: \` {{'foo' in 'foobar'}} \`,
+        })
+        class TestCmp {
+        }
+        `,
+      );
+
+      const diags = env.driveDiagnostics();
+      expect(diags.length).toBe(1);
+      expect(diags[0].messageText).toContain(`Type 'string' is not assignable to type 'object'`);
+    });
+
     describe('strictInputTypes', () => {
       beforeEach(() => {
         env.write(
diff --git a/packages/compiler/src/expression_parser/lexer.ts b/packages/compiler/src/expression_parser/lexer.ts
@@ -38,6 +38,7 @@ const KEYWORDS = [
   'this',
   'typeof',
   'void',
+  'in',
 ];
 
 export class Lexer {
@@ -119,6 +120,10 @@ export class Token {
     return this.type === TokenType.Keyword && this.strValue === 'void';
   }
 
+  isKeywordIn(): boolean {
+    return this.type === TokenType.Keyword && this.strValue === 'in';
+  }
+
   isError(): boolean {
     return this.type === TokenType.Error;
   }
diff --git a/packages/compiler/src/expression_parser/parser.ts b/packages/compiler/src/expression_parser/parser.ts
@@ -887,16 +887,17 @@ class _ParseAST {
   }
 
   private parseRelational(): AST {
-    // '<', '>', '<=', '>='
+    // '<', '>', '<=', '>=', 'in'
     const start = this.inputIndex;
     let result = this.parseAdditive();
-    while (this.next.type == TokenType.Operator) {
+    while (this.next.type == TokenType.Operator || this.next.isKeywordIn) {
       const operator = this.next.strValue;
       switch (operator) {
         case '<':
         case '>':
         case '<=':
         case '>=':
+        case 'in':
           this.advance();
           const right = this.parseAdditive();
           result = new Binary(this.span(start), this.sourceSpan(start), operator, result, right);
@@ -1054,6 +1055,9 @@ class _ParseAST {
     } else if (this.next.isKeywordFalse()) {
       this.advance();
       return new LiteralPrimitive(this.span(start), this.sourceSpan(start), false);
+    } else if (this.next.isKeywordIn()) {
+      this.advance();
+      return new LiteralPrimitive(this.span(start), this.sourceSpan(start), 'in');
     } else if (this.next.isKeywordThis()) {
       this.advance();
       return new ThisReceiver(this.span(start), this.sourceSpan(start));
diff --git a/packages/compiler/src/output/abstract_emitter.ts b/packages/compiler/src/output/abstract_emitter.ts
@@ -479,6 +479,9 @@ export abstract class AbstractEmitterVisitor implements o.StatementVisitor, o.Ex
       case o.BinaryOperator.NullishCoalesce:
         opStr = '??';
         break;
+      case o.BinaryOperator.In:
+        opStr = 'in';
+        break;
       default:
         throw new Error(`Unknown operator ${ast.operator}`);
     }
diff --git a/packages/compiler/src/output/output_ast.ts b/packages/compiler/src/output/output_ast.ts
@@ -141,6 +141,7 @@ export enum BinaryOperator {
   BiggerEquals,
   NullishCoalesce,
   Exponentiation,
+  In,
 }
 
 export function nullSafeIsEquivalent<T extends {isEquivalent(other: T): boolean}>(
diff --git a/packages/compiler/src/template/pipeline/src/conversion.ts b/packages/compiler/src/template/pipeline/src/conversion.ts
@@ -29,6 +29,7 @@ export const BINARY_OPERATORS = new Map([
   ['??', o.BinaryOperator.NullishCoalesce],
   ['||', o.BinaryOperator.Or],
   ['+', o.BinaryOperator.Plus],
+  ['in', o.BinaryOperator.In],
 ]);
 
 export function namespaceForKey(namespacePrefixKey: string | null): ir.Namespace {
diff --git a/packages/compiler/test/expression_parser/lexer_spec.ts b/packages/compiler/test/expression_parser/lexer_spec.ts
@@ -204,6 +204,12 @@ describe('lexer', () => {
       expect(tokens[0].isKeywordVoid()).toBe(true);
     });
 
+    it('should tokenize in keyword', () => {
+      const tokens: Token[] = lex('in');
+      expectKeywordToken(tokens[0], 0, 2, 'in');
+      expect(tokens[0].isKeywordIn()).toBe(true);
+    });
+
     it('should ignore whitespace', () => {
       const tokens: Token[] = lex('a \t \n \r b');
       expectIdentifierToken(tokens[0], 0, 1, 'a');
diff --git a/packages/compiler/test/expression_parser/parser_spec.ts b/packages/compiler/test/expression_parser/parser_spec.ts
@@ -117,6 +117,11 @@ describe('parser', () => {
       checkAction('(1 + 2) * 3');
     });
 
+    it('should parse in expressions', () => {
+      checkAction(`'key' in obj`, `"key" in obj`);
+      checkAction(`('key' in obj) && true`, `("key" in obj) && true`);
+    });
+
     it('should ignore comments in expressions', () => {
       checkAction('a //comment', 'a');
     });
diff --git a/packages/compiler/test/expression_parser/serializer_spec.ts b/packages/compiler/test/expression_parser/serializer_spec.ts
@@ -127,5 +127,9 @@ describe('serializer', () => {
     it('serializes void expressions', () => {
       expect(serialize(parse(' void   0 '))).toBe('void 0');
     });
+
+    it('serializes in expressions', () => {
+      expect(serialize(parse(' foo   in   bar '))).toBe('foo in bar');
+    });
   });
 });
diff --git a/packages/core/test/acceptance/control_flow_if_spec.ts b/packages/core/test/acceptance/control_flow_if_spec.ts
@@ -292,6 +292,30 @@ describe('control flow - if', () => {
     expect(fixture.nativeElement.textContent.trim()).toBe('42');
   });
 
+  it('should support a condition with the a binary expression with the in keyword', () => {
+    @Component({
+      standalone: true,
+      template: `
+          @if (key in {foo: 'bar'}) {
+            has {{key}}
+          } @else {
+            no {{key}}
+          }
+        `,
+    })
+    class TestComponent {
+      key: string | number = 'foo';
+    }
+
+    const fixture = TestBed.createComponent(TestComponent);
+    fixture.detectChanges();
+    expect(fixture.nativeElement.textContent.trim()).toBe('has foo');
+
+    fixture.componentInstance.key = 42;
+    fixture.detectChanges();
+    expect(fixture.nativeElement.textContent.trim()).toBe('no 42');
+  });
+
   describe('content projection', () => {
     it('should project an @if with a single root node into the root node slot', () => {
       @Component({
diff --git a/packages/core/test/acceptance/integration_spec.ts b/packages/core/test/acceptance/integration_spec.ts
@@ -2805,6 +2805,24 @@ describe('acceptance integration tests', () => {
     expect(fixture.nativeElement.textContent).toBe(`string`);
   });
 
+  it('should support "in" expressions', () => {
+    @Component({
+      standalone: true,
+      template: `{{'foo' in obj ? 'OK' : 'KO'}}`,
+    })
+    class TestComponent {
+      obj: any = {foo: 'bar'};
+    }
+
+    const fixture = TestBed.createComponent(TestComponent);
+    fixture.detectChanges();
+    expect(fixture.nativeElement.textContent).toContain('OK');
+
+    fixture.componentInstance.obj = {bar: 'foo'};
+    fixture.detectChanges();
+    expect(fixture.nativeElement.textContent).toContain('KO');
+  });
+
   describe('tView.firstUpdatePass', () => {
     function isFirstUpdatePass() {
       const lView = getLView();
diff --git a/packages/core/test/acceptance/standalone_spec.ts b/packages/core/test/acceptance/standalone_spec.ts
@@ -814,37 +814,37 @@ describe('standalone components, directives, and pipes', () => {
     it('should allow extending a regular component and turn it into a standalone one', () => {
       @Component({
         selector: 'regular',
-        template: 'regular: {{in}}',
+        template: 'regular: {{input}}',
         standalone: false,
       })
       class RegularCmp {
-        @Input() in: string | undefined;
+        @Input() input: string | undefined;
       }
 
-      @Component({selector: 'standalone', template: 'standalone: {{in}}'})
+      @Component({selector: 'standalone', template: 'standalone: {{input}}'})
       class StandaloneCmp extends RegularCmp {}
 
       const fixture = TestBed.createComponent(StandaloneCmp);
-      fixture.componentInstance.in = 'input value';
+      fixture.componentInstance.input = 'input value';
       fixture.detectChanges();
       expect(fixture.nativeElement.textContent).toBe('standalone: input value');
     });
 
     it('should allow extending a regular component and turn it into a standalone one', () => {
       @Component({selector: 'standalone', template: 'standalone: {{in}}'})
       class StandaloneCmp {
-        @Input() in: string | undefined;
+        @Input() input: string | undefined;
       }
 
       @Component({
         selector: 'regular',
-        template: 'regular: {{in}}',
+        template: 'regular: {{input}}',
         standalone: false,
       })
       class RegularCmp extends StandaloneCmp {}
 
       const fixture = TestBed.createComponent(RegularCmp);
-      fixture.componentInstance.in = 'input value';
+      fixture.componentInstance.input = 'input value';
       fixture.detectChanges();
       expect(fixture.nativeElement.textContent).toBe('regular: input value');
     });
@@ -858,11 +858,11 @@ describe('standalone components, directives, and pipes', () => {
 
       @Component({
         selector: 'standalone',
-        template: 'standalone: {{in}}; (<inner></inner>)',
+        template: 'standalone: {{input}}; (<inner></inner>)',
         imports: [InnerCmp],
       })
       class StandaloneCmp {
-        @Input() in: string | undefined;
+        @Input() input: string | undefined;
       }
 
       @Component({
@@ -872,7 +872,7 @@ describe('standalone components, directives, and pipes', () => {
       class RegularCmp extends StandaloneCmp {}
 
       const fixture = TestBed.createComponent(RegularCmp);
-      fixture.componentInstance.in = 'input value';
+      fixture.componentInstance.input = 'input value';
       fixture.detectChanges();
       // the assumption here is that not providing a template is equivalent to providing an empty
       // one
diff --git a/packages/core/test/render3/component_ref_spec.ts b/packages/core/test/render3/component_ref_spec.ts
diff --git a/packages/language-service/test/definitions_spec.ts b/packages/language-service/test/definitions_spec.ts
diff --git a/packages/language-service/test/quick_info_spec.ts b/packages/language-service/test/quick_info_spec.ts

-Original file line number
+Diff line change
   | '!=='
   | '||'
   | '+'
 -  | '??';
 +  | '??'
 +  | 'in';
 /**
  * The original location of the start or end of a node created by the `AstFactory`.