refactor: migration from NgClass to class bindings

xidedix · xidedix · commit c8adcfed3f4c · 2025-12-09T14:37:31.000+01:00
diff --git a/projects/coreui-angular/src/lib/avatar/avatar.component.html b/projects/coreui-angular/src/lib/avatar/avatar.component.html
@@ -16,6 +16,6 @@
   }
 </ng-content>
 @if (!!status()) {
-  <span [ngClass]="statusClass()"></span>
+  <span [class]="statusClass()"></span>
 }
 
diff --git a/projects/coreui-angular/src/lib/avatar/avatar.component.ts b/projects/coreui-angular/src/lib/avatar/avatar.component.ts
@@ -1,4 +1,3 @@
-import { NgClass } from '@angular/common';
 import { Component, computed, input, InputSignal } from '@angular/core';
 
 import { Colors, Shapes, Sizes, TextColors } from '../coreui.types';
@@ -8,7 +7,6 @@ import { TextColorDirective } from '../utilities';
   selector: 'c-avatar',
   templateUrl: './avatar.component.html',
   styleUrls: ['./avatar.component.scss'],
-  imports: [NgClass],
   hostDirectives: [
     {
       directive: TextColorDirective,
diff --git a/projects/coreui-angular/src/lib/header/header/header.component.html b/projects/coreui-angular/src/lib/header/header/header.component.html
@@ -1,5 +1,5 @@
 @if (!!container()) {
-  <div [ngClass]="headerClasses()">
+  <div [class]="headerClasses()">
     <ng-content />
   </div>
 } @else {
diff --git a/projects/coreui-angular/src/lib/header/header/header.component.ts b/projects/coreui-angular/src/lib/header/header/header.component.ts
@@ -1,5 +1,4 @@
 import { Component, computed, input, InputSignal } from '@angular/core';
-import { NgClass } from '@angular/common';
 
 import { Positions } from '../../coreui.types';
 
@@ -8,7 +7,6 @@ type Container = boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'fluid';
 @Component({
   selector: 'c-header, [c-header]',
   templateUrl: './header.component.html',
-  imports: [NgClass],
   exportAs: 'cHeader',
   host: { '[attr.role]': 'role()', '[class]': 'hostClasses()' }
 })
diff --git a/projects/coreui-angular/src/lib/navbar/navbar.component.html b/projects/coreui-angular/src/lib/navbar/navbar.component.html
@@ -1,7 +1,7 @@
 <ng-container *ngTemplateOutlet="container() ? withContainerTemplate : noContainerTemplate" />
 
 <ng-template #withContainerTemplate>
-  <div [ngClass]="containerClass()">
+  <div [class]="containerClass()">
     <ng-content />
   </div>
 </ng-template>
diff --git a/projects/coreui-angular/src/lib/navbar/navbar.component.ts b/projects/coreui-angular/src/lib/navbar/navbar.component.ts
@@ -12,7 +12,7 @@ import {
   OnDestroy,
   signal
 } from '@angular/core';
-import { NgClass, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import { Subscription } from 'rxjs';
 
 import { CollapseDirective } from '../collapse';
@@ -25,7 +25,7 @@ import { ThemeDirective } from '../shared';
 @Component({
   selector: 'c-navbar',
   templateUrl: './navbar.component.html',
-  imports: [NgClass, NgTemplateOutlet],
+  imports: [NgTemplateOutlet],
   hostDirectives: [{ directive: ThemeDirective, inputs: ['colorScheme'] }],
   host: { '[class]': 'hostClasses()', '[attr.role]': 'role()' }
 })
diff --git a/projects/coreui-angular/src/lib/pagination/pagination/pagination.component.html b/projects/coreui-angular/src/lib/pagination/pagination/pagination.component.html
@@ -1,3 +1,3 @@
-<ul [ngClass]="paginationClass()">
+<ul [class]="paginationClass()">
   <ng-content />
 </ul>
diff --git a/projects/coreui-angular/src/lib/pagination/pagination/pagination.component.ts b/projects/coreui-angular/src/lib/pagination/pagination/pagination.component.ts
@@ -1,10 +1,8 @@
 import { Component, computed, input } from '@angular/core';
-import { NgClass } from '@angular/common';
 
 @Component({
   selector: 'c-pagination',
   templateUrl: './pagination.component.html',
-  imports: [NgClass],
   host: {
     '[attr.role]': 'role()'
   }
diff --git a/projects/coreui-angular/src/lib/popover/popover/popover.component.html b/projects/coreui-angular/src/lib/popover/popover/popover.component.html
@@ -1,4 +1,4 @@
 <ng-container>
-  <div [ngClass]="{'popover-arrow': !!content()}" data-popper-arrow></div>
+  <div [class.popover-arrow]="!!content()" data-popper-arrow></div>
   <ng-container #popoverTemplate />
 </ng-container>
diff --git a/projects/coreui-angular/src/lib/popover/popover/popover.component.ts b/projects/coreui-angular/src/lib/popover/popover/popover.component.ts
@@ -11,12 +11,11 @@ import {
   viewChild,
   ViewContainerRef
 } from '@angular/core';
-import { NgClass } from '@angular/common';
+
 
 @Component({
   selector: 'c-popover',
   templateUrl: './popover.component.html',
-  imports: [NgClass],
   host: {
     class: 'popover fade bs-popover-auto',
     '[class]': 'hostClasses()',
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-brand/sidebar-brand.component.html b/projects/coreui-angular/src/lib/sidebar/sidebar-brand/sidebar-brand.component.html
@@ -1,10 +1,10 @@
 @if (brandImg()) {
   <a [routerLink]="routerLink()">
     @if (brandFull()) {
-      <img [cHtmlAttr]="brandFull()" [ngClass]="'sidebar-brand-full'">
+      <img [cHtmlAttr]="brandFull()" [class]="'sidebar-brand-full'">
     }
     @if (brandNarrow()) {
-      <img [cHtmlAttr]="brandNarrow()" [ngClass]="'sidebar-brand-narrow'">
+      <img [cHtmlAttr]="brandNarrow()" [class]="'sidebar-brand-narrow'">
     }
   </a>
 } @else {
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-brand/sidebar-brand.component.ts b/projects/coreui-angular/src/lib/sidebar/sidebar-brand/sidebar-brand.component.ts
@@ -1,13 +1,12 @@
 import { Component, computed, input } from '@angular/core';
-import { NgClass } from '@angular/common';
 import { RouterLink, type UrlTree } from '@angular/router';
 
 import { HtmlAttributesDirective } from '../../shared';
 
 @Component({
   selector: 'c-sidebar-brand',
   templateUrl: './sidebar-brand.component.html',
-  imports: [RouterLink, HtmlAttributesDirective, NgClass],
+  imports: [RouterLink, HtmlAttributesDirective],
   host: { class: 'sidebar-brand' }
 })
 export class SidebarBrandComponent {
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-group.component.html b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-group.component.html
@@ -6,7 +6,7 @@
   <ng-container *ngTemplateOutlet="iconTemplate ; context: {$implicit: grpItem}" />
   <ng-container>{{ grpItem?.name }}</ng-container>
   @if (grpItem?.badge) {
-    <span [ngClass]="item | cSidebarNavBadge">{{ grpItem?.badge?.text }}</span>
+    <span [class]="item | cSidebarNavBadge">{{ grpItem?.badge?.text }}</span>
   }
 </a>
 <c-sidebar-nav
@@ -21,10 +21,10 @@
 />
 
 <ng-template #iconTemplate let-item>
-  <!--  <i *ngIf="item?.icon" [ngClass]="item | cSidebarNavIcon"></i>-->
+  <!--  <i *ngIf="item?.icon" [class]="item | cSidebarNavIcon"></i>-->
   @if (item?.icon) {
     <span class="nav-icon">
-    <span [ngClass]="item.icon ?? ''"></span>
+    <span [class]="item.icon ?? ''"></span>
   </span>
   }
   @if (item?.iconComponent) {
@@ -35,6 +35,6 @@
     />
   }
   @if (!item?.icon && !item?.iconComponent) {
-    <span [ngClass]="item | cSidebarNavIcon"></span>
+    <span [class]="item | cSidebarNavIcon"></span>
   }
 </ng-template>
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-label.component.html b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-label.component.html
@@ -1,12 +1,12 @@
 @let labelItem = item();
 <a [cHtmlAttr]="labelItem.attributes"
-   [ngClass]="itemClass()"
+   [class]="itemClass()"
    href="{{labelItem.url}}">
   @if (helper.hasIcon(labelItem)) {
-    <i [ngClass]="labelIconClass()"></i>
+    <i [class]="labelIconClass()"></i>
   }
   <ng-container>{{ labelItem.name }}</ng-container>
   @if (helper.hasBadge(labelItem)) {
-    <span [ngClass]="labelItem | cSidebarNavBadge">{{ labelItem.badge?.text ?? '' }}</span>
+    <span [class]="labelItem | cSidebarNavBadge">{{ labelItem.badge?.text ?? '' }}</span>
   }
 </a>
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-label.component.ts b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-label.component.ts
@@ -1,5 +1,4 @@
 import { Component, computed, inject, input } from '@angular/core';
-import { NgClass } from '@angular/common';
 
 import { HtmlAttributesDirective } from '../../shared';
 import { SidebarNavHelper } from './sidebar-nav.service';
@@ -9,7 +8,7 @@ import { INavData } from './sidebar-nav';
 @Component({
   selector: 'c-sidebar-nav-label',
   templateUrl: './sidebar-nav-label.component.html',
-  imports: [HtmlAttributesDirective, SidebarNavBadgePipe, NgClass]
+  imports: [HtmlAttributesDirective, SidebarNavBadgePipe]
 })
 export class SidebarNavLabelComponent {
   readonly helper = inject(SidebarNavHelper);
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-link.component.html b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-link.component.html
@@ -2,28 +2,28 @@
 
 @switch (linkType) {
   @case ('disabled') {
-    <a [cHtmlAttr]="linkItem.attributes ?? {}" [ngClass]="linkItem | cSidebarNavLink">
+    <a [cHtmlAttr]="linkItem.attributes ?? {}" [class]="linkItem | cSidebarNavLink">
       <ng-container *ngTemplateOutlet="iconTemplate; context: {$implicit: linkItem}" />
       <c-sidebar-nav-link-content [item]="linkItem" />
       @if (linkItem.badge) {
-        <span [ngClass]="linkItem | cSidebarNavBadge">{{ linkItem.badge?.text }}</span>
+        <span [class]="linkItem | cSidebarNavBadge">{{ linkItem.badge?.text }}</span>
       }
     </a>
   }
   @case ('external') {
-    <a (click)="linkClicked()" [cHtmlAttr]="linkItem.attributes ?? {}" [href]="href" [ngClass]="linkItem | cSidebarNavLink">
+    <a (click)="linkClicked()" [cHtmlAttr]="linkItem.attributes ?? {}" [href]="href" [class]="linkItem | cSidebarNavLink">
       <ng-container *ngTemplateOutlet="iconTemplate; context: {$implicit: linkItem}" />
       <c-sidebar-nav-link-content [item]="linkItem" />
       @if (linkItem.badge) {
-        <span [ngClass]="linkItem | cSidebarNavBadge">{{ linkItem.badge?.text }}</span>
+        <span [class]="linkItem | cSidebarNavBadge">{{ linkItem.badge?.text }}</span>
       }
     </a>
   }
   @default {
     <a (click)="linkClicked()"
        [cHtmlAttr]="linkItem.attributes ?? {}"
        [fragment]="linkItem.linkProps?.fragment"
-       [ngClass]="linkItem | cSidebarNavLink"
+       [class]="linkItem | cSidebarNavLink"
        [preserveFragment]="linkItem.linkProps?.preserveFragment ?? false"
        [queryParamsHandling]="linkItem.linkProps?.queryParamsHandling"
        [queryParams]="linkItem.linkProps?.queryParams ?? null"
@@ -39,16 +39,16 @@
       <ng-container *ngTemplateOutlet="iconTemplate ; context: {$implicit: linkItem}" />
       <c-sidebar-nav-link-content [item]="linkItem" />
       @if (linkItem.badge) {
-        <span [ngClass]="linkItem | cSidebarNavBadge">{{ linkItem.badge?.text }}</span>
+        <span [class]="linkItem | cSidebarNavBadge">{{ linkItem.badge?.text }}</span>
       }
     </a>
   }
 }
 <ng-template #iconTemplate let-item>
-  <!--  <i *ngIf="item?.icon" [ngClass]="item | cSidebarNavIcon"></i>-->
+  <!--  <i *ngIf="item?.icon" [class]="item | cSidebarNavIcon"></i>-->
   @if (item?.icon) {
     <span class="nav-icon">
-      <span [ngClass]="item.icon ?? ''"></span>
+      <span [class]="item.icon ?? ''"></span>
     </span>
   }
   @if (item?.iconComponent) {
@@ -59,6 +59,6 @@
     ></svg>
   }
   @if (!item?.icon && !item?.iconComponent) {
-    <span [ngClass]="item | cSidebarNavIcon"></span>
+    <span [class]="item | cSidebarNavIcon"></span>
   }
 </ng-template>
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-link.component.ts b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-link.component.ts
@@ -1,4 +1,4 @@
-import { NgClass, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import { Component, inject, input, OnDestroy, OnInit, output } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NavigationEnd, Router, RouterModule } from '@angular/router';
@@ -42,8 +42,7 @@ export class SidebarNavLinkContentComponent {
     SidebarNavLinkPipe,
     SidebarNavBadgePipe,
     SidebarNavIconPipe,
-    NgTemplateOutlet,
-    NgClass
+    NgTemplateOutlet
   ]
 })
 export class SidebarNavLinkComponent implements OnInit, OnDestroy {
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav.component.html b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav.component.html
@@ -5,7 +5,7 @@
         #rla="routerLinkActive"
         [dropdownMode]="dropdownMode()"
         [item]="nItem"
-        [ngClass]="nItem | cSidebarNavItemClass"
+        [class]="nItem | cSidebarNavItemClass"
         [routerLinkActiveOptions]="{exact: true}"
         routerLinkActive="show"
         [compact]="compact()"
@@ -15,20 +15,20 @@
       <c-sidebar-nav-divider
         [cHtmlAttr]="nItem.attributes ?? {}"
         [item]="nItem"
-        [ngClass]="nItem | cSidebarNavItemClass"
+        [class]="nItem | cSidebarNavItemClass"
       />
     }
     @case ('title') {
       <c-sidebar-nav-title
         [cHtmlAttr]="nItem.attributes ?? {}"
         [item]="nItem"
-        [ngClass]="nItem | cSidebarNavItemClass"
+        [class]="nItem | cSidebarNavItemClass"
       />
     }
     @case ('label') {
       <c-sidebar-nav-label
         [item]="nItem"
-        [ngClass]="nItem | cSidebarNavItemClass"
+        [class]="nItem | cSidebarNavItemClass"
       />
     }
     @case ('empty') {
@@ -38,7 +38,7 @@
       <c-sidebar-nav-link
         (linkClick)="hideMobile()"
         [item]="nItem"
-        [ngClass]="nItem | cSidebarNavItemClass"
+        [class]="nItem | cSidebarNavItemClass"
       />
     }
   }
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav.component.ts b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav.component.ts
@@ -1,5 +1,5 @@
 import { animate, AnimationEvent, state, style, transition, trigger } from '@angular/animations';
-import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
+import { NgStyle, NgTemplateOutlet } from '@angular/common';
 import {
   booleanAttribute,
   Component,
@@ -44,7 +44,6 @@ import { IconDirective } from '@coreui/icons-angular';
     HtmlAttributesDirective,
     IconDirective,
     NgTemplateOutlet,
-    NgClass,
     SidebarNavIconPipe,
     SidebarNavBadgePipe,
     forwardRef(() => SidebarNavComponent),
@@ -199,7 +198,6 @@ export class SidebarNavGroupComponent implements OnInit, OnDestroy {
   selector: 'c-sidebar-nav',
   templateUrl: './sidebar-nav.component.html',
   imports: [
-    NgClass,
     HtmlAttributesDirective,
     SidebarNavLinkComponent,
     SidebarNavLabelComponent,
diff --git a/projects/coreui-angular/src/lib/widget/widget-stat-a/widget-stat-a.component.html b/projects/coreui-angular/src/lib/widget/widget-stat-a/widget-stat-a.component.html
@@ -1,5 +1,5 @@
 <ng-container>
-  <c-card-body [ngClass]="bodyClasses">
+  <c-card-body [class]="bodyClasses">
     <div>
       @if (!!value() || templates?.['widgetValueTemplate']) {
         <div class="fs-4 fw-semibold">
diff --git a/projects/coreui-angular/src/lib/widget/widget-stat-a/widget-stat-a.component.ts b/projects/coreui-angular/src/lib/widget/widget-stat-a/widget-stat-a.component.ts
@@ -3,13 +3,13 @@ import { Component, computed, contentChildren, effect, input, InputSignal, Templ
 import { Colors } from '../../coreui.types';
 import { TemplateIdDirective } from '../../shared';
 import { CardBodyComponent, CardComponent } from '../../card';
-import { NgClass, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 
 @Component({
   selector: 'c-widget-stat-a',
   templateUrl: './widget-stat-a.component.html',
   exportAs: 'cWidgetStatA',
-  imports: [CardBodyComponent, NgClass, NgTemplateOutlet],
+  imports: [CardBodyComponent, NgTemplateOutlet],
   host: { class: 'card', '[class]': 'hostClasses()' }
 })
 export class WidgetStatAComponent extends CardComponent {
diff --git a/projects/coreui-angular/src/lib/widget/widget-stat-b/widget-stat-b.component.html b/projects/coreui-angular/src/lib/widget/widget-stat-b/widget-stat-b.component.html
@@ -7,7 +7,7 @@
   }
   <ng-content />
   @if (text()) {
-    <small [ngClass]="inverse() ? 'text-white text-opacity-75' : 'text-body-secondary'">
+    <small [class]="inverse() ? 'text-white text-opacity-75' : 'text-body-secondary'">
       {{ text() }}
     </small>
   }
diff --git a/projects/coreui-angular/src/lib/widget/widget-stat-b/widget-stat-b.component.ts b/projects/coreui-angular/src/lib/widget/widget-stat-b/widget-stat-b.component.ts
@@ -1,14 +1,13 @@
 import { booleanAttribute, Component, computed, input, InputSignal, InputSignalWithTransform } from '@angular/core';
-import { NgClass } from '@angular/common';
 
 import { CardBodyComponent, CardComponent } from '../../card';
 
 @Component({
-    selector: 'c-widget-stat-b',
-    templateUrl: './widget-stat-b.component.html',
-    exportAs: 'cWidgetStatB',
-    imports: [CardBodyComponent, NgClass],
-    host: { class: 'card', '[class]': 'hostClasses()' }
+  selector: 'c-widget-stat-b',
+  templateUrl: './widget-stat-b.component.html',
+  exportAs: 'cWidgetStatB',
+  imports: [CardBodyComponent],
+  host: { class: 'card', '[class]': 'hostClasses()' }
 })
 export class WidgetStatBComponent extends CardComponent {
   constructor() {
diff --git a/projects/coreui-angular/src/lib/widget/widget-stat-c/widget-stat-c.component.html b/projects/coreui-angular/src/lib/widget/widget-stat-c/widget-stat-c.component.html
diff --git a/projects/coreui-angular/src/lib/widget/widget-stat-c/widget-stat-c.component.ts b/projects/coreui-angular/src/lib/widget/widget-stat-c/widget-stat-c.component.ts
diff --git a/projects/coreui-angular/src/lib/widget/widget-stat-d/widget-stat-d.component.html b/projects/coreui-angular/src/lib/widget/widget-stat-d/widget-stat-d.component.html
diff --git a/projects/coreui-angular/src/lib/widget/widget-stat-d/widget-stat-d.component.ts b/projects/coreui-angular/src/lib/widget/widget-stat-d/widget-stat-d.component.ts
diff --git a/projects/coreui-angular/src/lib/widget/widget-stat-e/widget-stat-e.component.html b/projects/coreui-angular/src/lib/widget/widget-stat-e/widget-stat-e.component.html
diff --git a/projects/coreui-angular/src/lib/widget/widget-stat-e/widget-stat-e.component.ts b/projects/coreui-angular/src/lib/widget/widget-stat-e/widget-stat-e.component.ts
diff --git a/projects/coreui-angular/src/lib/widget/widget-stat-f/widget-stat-f.component.html b/projects/coreui-angular/src/lib/widget/widget-stat-f/widget-stat-f.component.html
diff --git a/projects/coreui-angular/src/lib/widget/widget-stat-f/widget-stat-f.component.ts b/projects/coreui-angular/src/lib/widget/widget-stat-f/widget-stat-f.component.ts
diff --git a/projects/coreui-icons-angular/src/lib/icon/icon.component.svg b/projects/coreui-icons-angular/src/lib/icon/icon.component.svg
diff --git a/projects/coreui-icons-angular/src/lib/icon/icon.component.ts b/projects/coreui-icons-angular/src/lib/icon/icon.component.ts

Original file line number	Diff line number	Diff line change
`@@ -16,6 +16,6 @@`
`16`	`16`	`}`
`17`	`17`	`</ng-content>`
`18`	`18`	`@if (!!status()) {`
`19`		`- <span [ngClass]="statusClass()"></span>`
	`19`	`+ <span [class]="statusClass()"></span>`
`20`	`20`	`}`
`21`	`21`