angular · masaoki · Jan 31, 2023
diff --git a/packages/core/src/render3/node_selector_matcher.ts b/packages/core/src/render3/node_selector_matcher.ts
@@ -35,12 +35,19 @@ function isCssClassMatching(
       assertEqual(
           cssClassToMatch, cssClassToMatch.toLowerCase(), 'Class name expected to be lowercase.');
   let i = 0;
+  // Indicates whether we are processing value from the implicit
+  // attribute section (i.e. before the first marker in the array).
+  let isImplicitAttrsSection = true;
   while (i < attrs.length) {
     let item = attrs[i++];
-    if (isProjectionMode && item === 'class') {
-      item = attrs[i] as string;
-      if (classIndexOf(item.toLowerCase(), cssClassToMatch, 0) !== -1) {
-        return true;
+    if (typeof item === 'string' && isImplicitAttrsSection) {
+      const value = attrs[i++] as string;
+      if (isProjectionMode && item === 'class') {
+        // We found a `class` attribute in the implicit attribute section,
+        // check if it matches the value of the `cssClassToMatch` argument.
+        if (classIndexOf(value.toLowerCase(), cssClassToMatch, 0) !== -1) {
+          return true;
+        }
       }
     } else if (item === AttributeMarker.Classes) {
       // We found the classes section. Start searching for the class.
@@ -49,6 +56,10 @@ function isCssClassMatching(
         if (item.toLowerCase() === cssClassToMatch) return true;
       }
       return false;
+    } else if (typeof item === 'number') {
+      // We've came across a first marker, which indicates
+      // that the implicit attribute section is over.
+      isImplicitAttrsSection = false;
     }
   }
   return false;

diff --git a/packages/core/test/acceptance/content_spec.ts b/packages/core/test/acceptance/content_spec.ts
@@ -1321,6 +1321,51 @@ describe('projection', () => {
         expect(fixture.nativeElement).toHaveText('Hello world!');
         expect(xDirectives).toEqual(1);
       });
+
+      it('should work without exception when subelement has both ngIf and class as interpolation',
+         () => {
+           @Component(
+               {selector: 'child-comp', template: '<ng-content select=".nomatch"></ng-content>'})
+           class ChildComp {
+           }
+
+           @Component({
+             selector: 'parent-comp',
+             template: `<child-comp><span *ngIf="true" class="{{'a'}}"></span></child-comp>`
+           })
+           class ParentComp {
+           }
+
+           TestBed.configureTestingModule({declarations: [ParentComp, ChildComp]});
+           const fixture = TestBed.createComponent<ParentComp>(ParentComp);
+
+           fixture.detectChanges();
+           expect(fixture.nativeElement.innerHTML).toBe('<child-comp></child-comp>');
+         });
+    });
+
+    it('selection of child element should properly work even with confusing attribute names', () => {
+      @Component({selector: 'child-comp', template: '<ng-content select=".title"></ng-content>'})
+      class ChildComp {
+      }
+
+      @Component({
+        selector: 'parent-comp',
+        template:
+            `<child-comp><span *ngIf="true" id="5" jjj="class" class="{{'a'}}" [title]="'abc'"></span></child-comp>`
+      })
+      class ParentComp {
+      }
+
+      TestBed.configureTestingModule({declarations: [ParentComp, ChildComp]});
+      const fixture = TestBed.createComponent<ParentComp>(ParentComp);
+
+      fixture.detectChanges();
+      // tNode.attrs will be ['id', '5', 'jjj', 'class', 3 /* AttributeMarker.Bindings */, 'class',
+      // 'title', 4 /* AttributeMarker.Template */, 'ngIf'] isNodeMatchingSelector() must not
+      // confuse it as 'class=title' attribute. <ng-content select=".title"> should not match the
+      // child.
+      expect(fixture.nativeElement.innerHTML).toBe('<child-comp></child-comp>');
     });
   });
 });