refactor: migration from NgClass to class bindings

Author: xidedix

src/app/views/base/breadcrumbs/breadcrumbs.component.html

@@ -53,7 +53,7 @@
           <c-breadcrumb class="mb-2">
             @for (item of items.slice(0, 4); track item; let i = $index, isLast = $last) {
               <c-breadcrumb-item [active]="isLast" [url]="item.url">
-                <span [ngClass]="{'mark': isLast}">{{ item.label }}</span>
+                <span [class.mark]="isLast">{{ item.label }}</span>
               </c-breadcrumb-item>
             }
           </c-breadcrumb>

src/app/views/base/breadcrumbs/breadcrumbs.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, signal } from '@angular/core';
-import { NgClass } from '@angular/common';
+
 import {
   BreadcrumbComponent,
   BreadcrumbItemComponent,
@@ -14,7 +14,7 @@ import { DocsComponentsComponent, DocsExampleComponent } from '@docs-components/
 
 @Component({
   templateUrl: './breadcrumbs.component.html',
-  imports: [RowComponent, ColComponent, CardComponent, CardHeaderComponent, CardBodyComponent, DocsExampleComponent, BreadcrumbComponent, BreadcrumbItemComponent, NgClass, BreadcrumbRouterComponent, DocsComponentsComponent]
+  imports: [RowComponent, ColComponent, CardComponent, CardHeaderComponent, CardBodyComponent, DocsExampleComponent, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbRouterComponent, DocsComponentsComponent]
 })
 export class BreadcrumbsComponent implements OnInit {
   public breadcrumbItems = signal<any>([]);

src/app/views/notifications/toasters/toasters.component.html

@@ -2,7 +2,7 @@
   <c-col xs="12">
     <app-docs-components href="components/toast" title="Toast" />
     @for (pos of positions | slice : 1; track pos) {
-      <c-toaster [ngClass]="'p-3'" position="fixed" placement="{{pos}}" />
+      <c-toaster class="p-3" position="fixed" placement="{{pos}}" />
     }
     <c-card>
       <c-card-header>

src/app/views/notifications/toasters/toasters.component.ts

@@ -1,4 +1,4 @@
-import { JsonPipe, NgClass, NgStyle, SlicePipe } from '@angular/common';
+import { JsonPipe, NgStyle, SlicePipe } from '@angular/common';
 import { Component, OnInit, viewChildren } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
@@ -46,7 +46,7 @@ export enum Colors {
 @Component({
   selector: 'app-toasters',
   templateUrl: './toasters.component.html',
-  imports: [RowComponent, ColComponent, ToasterComponent, NgClass, TextColorDirective, CardComponent, CardHeaderComponent, CardBodyComponent, ContainerComponent, ReactiveFormsModule, FormDirective, FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective, InputGroupComponent, InputGroupTextDirective, FormControlDirective, FormSelectDirective, ButtonDirective, NgStyle, ToastComponent, ToastHeaderComponent, ToastBodyComponent, AppToastComponent, JsonPipe, SlicePipe, TextColorDirective, DocsComponentsComponent]
+  imports: [RowComponent, ColComponent, ToasterComponent, TextColorDirective, CardComponent, CardHeaderComponent, CardBodyComponent, ContainerComponent, ReactiveFormsModule, FormDirective, FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective, InputGroupComponent, InputGroupTextDirective, FormControlDirective, FormSelectDirective, ButtonDirective, NgStyle, ToastComponent, ToastHeaderComponent, ToastBodyComponent, AppToastComponent, JsonPipe, SlicePipe, TextColorDirective, DocsComponentsComponent]
 })
 export class ToastersComponent implements OnInit {
 

src/app/views/theme/colors.component.ts

@@ -1,5 +1,4 @@
 import { AfterViewInit, Component, computed, DOCUMENT, forwardRef, inject, input, OnInit, Renderer2 } from '@angular/core';
-import { NgClass } from '@angular/common';
 
 import { getStyle, rgbToHex } from '@coreui/utils';
 import { CardBodyComponent, CardComponent, CardHeaderComponent, ColComponent, RowComponent } from '@coreui/angular';
@@ -48,11 +47,11 @@ export class ColorsComponent implements OnInit, AfterViewInit {
   selector: 'app-theme-color',
   template: `
     <c-col xl="2" md="4" sm="6" xs="12" class="my-4 ms-4">
-      <div [ngClass]="colorClasses()" style="padding-top: 75%;"></div>
+      <div [class]="colorClasses()" style="padding-top: 75%;"></div>
       <ng-content />
     </c-col>
   `,
-  imports: [ColComponent, NgClass],
+  imports: [ColComponent],
   host: {
     style: 'display: contents;'
   }