feat(migrations): add migration to convert ngClass to use class

aparzi · aparzi · commit e17d83cf3ecc · 2025-08-04T18:14:22.000+02:00
feat #61661 - add migration to convert ngClass to use class
diff --git a/adev/src/content/reference/migrations/ngclass-to-class.md b/adev/src/content/reference/migrations/ngclass-to-class.md
@@ -1,6 +1,7 @@
-# Migration to ngclass to class
+# Migration from NgClass to class bindings
 
-This schematic migrates the ngClass to class in your application.
+This schematic migrates NgClass directive usages to class bindings in your application.
+It will only migrate usages that are considered safe to migrate.
 
 Run the schematic using the following command:
 
@@ -19,4 +20,4 @@ ng generate @angular/core:ngclass-to-class
 #### After
 
 ```html
-<div [class.admin]="isAdmin" [class.dense]="density === 'high'">
+<div [class]="{admin: isAdmin, dense: density === 'high'}">
diff --git a/packages/core/schematics/migrations/ngclass-to-class-migration/ngclass-to-class-migration.spec.ts b/packages/core/schematics/migrations/ngclass-to-class-migration/ngclass-to-class-migration.spec.ts
@@ -25,16 +25,22 @@ describe('ngClass migrator', () => {
       await verifyDeclarationNoChange(`<div [class.active]="isActive"></div>`);
     });
 
-    it('should not change empty ngClass binding', async () => {
-      await verifyDeclarationNoChange(`<div [ngClass]="{}"></div>`);
+    it('should change empty ngClass binding', async () => {
+      await verifyDeclaration({
+        before: `<div [ngClass]="{}"></div>`,
+        after: `<div [class]=""></div>`,
+      });
     });
 
     it('should not change ngClass with empty string key', async () => {
       await verifyDeclarationNoChange(`<div [ngClass]="{'': condition}"></div>`);
     });
 
-    it('should not change ngClass with empty array', async () => {
-      await verifyDeclarationNoChange(`<div [ngClass]="[]"></div>`);
+    it('should change ngClass with empty array', async () => {
+      await verifyDeclaration({
+        before: `<div [ngClass]="[]"></div>`,
+        after: `<div [class]=""></div>`,
+      });
     });
   });
 
diff --git a/packages/core/schematics/migrations/ngclass-to-class-migration/util.ts b/packages/core/schematics/migrations/ngclass-to-class-migration/util.ts
@@ -200,10 +200,14 @@ export class NgClassCollector extends RecursiveVisitor {
 
         const staticMatch = tryParseStaticObjectLiteral(expr);
 
-        if (staticMatch && staticMatch.length > 0) {
-          const replacement = staticMatch
-            .map(({key, value}) => `[class.${key}]="${value}"`)
-            .join(' ');
+        if (staticMatch !== null) {
+          let replacement: string;
+
+          if (staticMatch.length === 0) {
+            replacement = '[class]=""';
+          } else {
+            replacement = staticMatch.map(({key, value}) => `[class.${key}]="${value}"`).join(' ');
+          }
 
           this.replacements.push({
             start: attr.sourceSpan.start.offset,
@@ -221,14 +225,12 @@ export class NgClassCollector extends RecursiveVisitor {
 function tryParseStaticObjectLiteral(expr: string): {key: string; value: string}[] | null {
   const trimmedExpr = expr.trim();
 
-  // Early validation
-  if (!isObjectLiteralSyntax(trimmedExpr)) {
-    return null;
+  if (trimmedExpr === '{}' || trimmedExpr === '[]') {
+    return [];
   }
 
-  // Handle empty object
-  if (trimmedExpr === '{}') {
-    return [];
+  if (!isObjectLiteralSyntax(trimmedExpr)) {
+    return null;
   }
 
   try {
diff --git a/packages/core/schematics/ng-generate/ngclass-to-class-migration/README.md b/packages/core/schematics/ng-generate/ngclass-to-class-migration/README.md
@@ -1,7 +1,6 @@
 
 # ngClass to class migration
-This schematic helps developers to convert ngClass to class attributes.
-This is a purely aesthetic change and does not affect the behavior of the application.
+This schematic helps developers to convert ngClass directive usages to class bindings where possible.
 
 ## How to run this migration?
 The migration can be run using the following command:
@@ -26,5 +25,5 @@ Example:
 <div [ngClass]="{admin: isAdmin, dense: density === 'high'}">
 
 <!-- After -->
-<div [class.admin]="isAdmin" [class.dense]="density === 'high'">
+<div [class]="{admin: isAdmin, dense: density === 'high'}">
 ```
