angular · vslipchenko · Oct 2, 2026
diff --git a/packages/compiler/src/template/pipeline/src/phases/host_style_property_parsing.ts b/packages/compiler/src/template/pipeline/src/phases/host_style_property_parsing.ts
@@ -53,10 +53,11 @@ export function parseHostStyleProperties(job: CompilationJob): void {
       op.name = 'style';
     } else if (op.name.startsWith(CLASS_DOT)) {
       op.bindingKind = ir.BindingKind.ClassName;
-      op.name = parseProperty(op.name.substring(CLASS_DOT.length)).property;
+      // Class names can contain dots (e.g. `px-3.5`), so there is no suffix to split off.
+      op.name = stripImportant(op.name.substring(CLASS_DOT.length));
     } else if (op.name.startsWith(CLASS_BANG)) {
       op.bindingKind = ir.BindingKind.ClassName;
-      op.name = parseProperty(op.name.substring(CLASS_BANG.length)).property;
+      op.name = stripImportant(op.name.substring(CLASS_BANG.length));
     }
   }
 }
@@ -77,11 +78,16 @@ function hyphenate(value: string): string {
     .toLowerCase();
 }
 
-function parseProperty(name: string): {property: string; suffix: string | null} {
-  const overrideIndex = name.indexOf('!important');
+function stripImportant(name: string): string {
+  const overrideIndex = name.indexOf(BANG_IMPORTANT);
   if (overrideIndex !== -1) {
     name = overrideIndex > 0 ? name.substring(0, overrideIndex) : '';
   }
+  return name;
+}
+
+function parseProperty(name: string): {property: string; suffix: string | null} {
+  name = stripImportant(name);
 
   let suffix: string | null = null;
   let property = name;

diff --git a/packages/compiler/src/template_parser/binding_parser.ts b/packages/compiler/src/template_parser/binding_parser.ts
@@ -589,7 +589,8 @@ export class BindingParser {
 
         bindingType = BindingType.Attribute;
       } else if (parts[0] == CLASS_PREFIX) {
-        boundPropertyName = parts[1];
+        // Class names can contain dots (e.g. `px-3.5`), so everything after the prefix is the name.
+        boundPropertyName = parts.slice(1).join(PROPERTY_PARTS_SEPARATOR);
         bindingType = BindingType.Class;
         securityContexts = [SecurityContext.NONE];
       } else if (parts[0] == STYLE_PREFIX) {

diff --git a/packages/compiler/test/render3/r3_template_transform_spec.ts b/packages/compiler/test/render3/r3_template_transform_spec.ts
@@ -435,6 +435,14 @@ describe('R3 template transform', () => {
       ]);
     });
 
+    it('should parse bound classes with dots in the name', () => {
+      expectFromHtml('<div [class.px-3.5]="v" [class.a.b.c]="w"></div>').toEqual([
+        ['Element', 'div'],
+        ['BoundAttribute', BindingType.Class, 'px-3.5', 'v'],
+        ['BoundAttribute', BindingType.Class, 'a.b.c', 'w'],
+      ]);
+    });
+
     it('should parse mixed case bound styles', () => {
       expectFromHtml('<div [style.someStyle]="v"></div>').toEqual([
         ['Element', 'div'],

diff --git a/packages/core/test/acceptance/styling_spec.ts b/packages/core/test/acceptance/styling_spec.ts
@@ -1617,6 +1617,33 @@ describe('styling', () => {
     expect(element.classList.contains('dir-two')).toBeTruthy();
   });
 
+  it('should support class bindings with dots in the class name', () => {
+    @Directive({
+      selector: '[dir]',
+      host: {'[class.py-2.5]': 'exp'},
+    })
+    class Dir {
+      exp = true;
+    }
+
+    @Component({
+      template: `<div dir [class.px-3.5]="exp"></div>`,
+      imports: [Dir],
+    })
+    class Cmp {
+      exp = true;
+    }
+
+    const fixture = TestBed.createComponent(Cmp);
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement.querySelector('div');
+    expect(element.classList.contains('px-3.5')).toBeTrue();
+    expect(element.classList.contains('py-2.5')).toBeTrue();
+    expect(element.classList.contains('px-3')).toBeFalse();
+    expect(element.classList.contains('py-2')).toBeFalse();
+  });
+
   it('should not write empty style values to the DOM', () => {
     @Component({
       template: `

diff --git a/packages/language-service/test/quick_info_spec.ts b/packages/language-service/test/quick_info_spec.ts
@@ -450,6 +450,14 @@ describe('quick info', () => {
         });
       });
 
+      it('should work in class bindings with dots in the class name', () => {
+        expectQuickInfo({
+          templateOverride: `<div [class.px-3.5]="tit¦le"></div>`,
+          expectedSpanText: 'title',
+          expectedDisplayString: '(property) AppCmp.title: string',
+        });
+      });
+
       it('should work for accessed function calls', () => {
         expectQuickInfo({
           templateOverride: `<div (click)="someObject.some¦Method()"></div>`,
@@ -1050,6 +1058,28 @@ describe('quick info', () => {
         });
       });
 
+      it('should handle host class binding with dots in the class name', () => {
+        const source = `
+          import {Component} from '@angular/core';
+
+          @Component({
+            template: '',
+            selector: 'app-cmp',
+            host: {'[class.py-2.5]': 'isActive'}
+          })
+          export class AppCmp {
+            isActive = true;
+          }
+        `;
+
+        expectHostBindingsQuickInfo({
+          source,
+          moveTo: `'[class.py-2.5]': 'isAc¦tive'`,
+          expectedSpanText: 'isActive',
+          expectedDisplayString: '(property) AppCmp.isActive: boolean',
+        });
+      });
+
       it('should handle host listener', () => {
         const source = `
           import {Component} from '@angular/core';