From 0881499d50fc88d4a31ad9c5793f075093cb53a1 Mon Sep 17 00:00:00 2001
From: Fahri Gedik <53567152+fahrigedik@users.noreply.github.com>
Date: Thu, 8 Jan 2026 12:48:47 +0300
Subject: [PATCH 1/5] Refactor to replace NgClass with class bindings

Replaced usage of NgClass with Angular's [class] and [class.*] bindings in multiple components for improved performance and clarity. Removed NgClass imports where no longer needed.
---
 .../manage-profile/manage-profile.component.html           | 4 ++--
 .../components/manage-profile/manage-profile.component.ts  | 7 +++----
 .../extensible-form/extensible-form-prop.component.html    | 2 +-
 .../extensible-form/extensible-form-prop.component.ts      | 7 +++----
 .../page-alert-container.component.html                    | 2 +-
 .../page-alert-container/page-alert-container.component.ts | 4 ++--
 .../src/lib/components/password/password.component.html    | 2 +-
 .../src/lib/components/password/password.component.ts      | 4 ++--
 8 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.html b/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.html
index 6eff5e9ed6..ba58de211b 100644
--- a/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.html
+++ b/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.html
@@ -8,7 +8,7 @@
             <li class="nav-item" (click)="selectedTab = 0">
               <a
                 class="nav-link"
-                [ngClass]="{ active: selectedTab === 0 }"
+                [class.active]="selectedTab === 0"
                 role="tab"
                 href="javascript:void(0)"
                 >{{ 'AbpUi::ChangePassword' | abpLocalization }}</a
@@ -18,7 +18,7 @@
           <li class="nav-item mb-2" (click)="selectedTab = 1">
             <a
               class="nav-link"
-              [ngClass]="{ active: selectedTab === 1 }"
+              [class.active]="selectedTab === 1"
               role="tab"
               href="javascript:void(0)"
               >{{ 'AbpAccount::PersonalSettings' | abpLocalization }}</a
diff --git a/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.ts b/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.ts
index c9095f63da..368818090d 100644
--- a/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.ts
+++ b/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.ts
@@ -4,7 +4,7 @@ import { transition, trigger, useAnimation } from '@angular/animations';
 import { Component, inject, OnInit } from '@angular/core';
 import { eAccountComponents } from '../../enums/components';
 import { ManageProfileStateService } from '../../services/manage-profile.state.service';
-import { NgClass, AsyncPipe } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
 import { LocalizationPipe, ReplaceableTemplateDirective } from '@abp/ng.core';
 import { PersonalSettingsComponent } from '../personal-settings/personal-settings.component';
@@ -23,15 +23,14 @@ import { ChangePasswordComponent } from '../change-password/change-password.comp
     `,
   ],
   imports: [
-    NgClass,
     AsyncPipe,
     ReactiveFormsModule,
     PersonalSettingsComponent,
     ChangePasswordComponent,
     LocalizationPipe,
     ReplaceableTemplateDirective,
-    LoadingDirective,
-  ],
+    LoadingDirective
+],
 })
 export class ManageProfileComponent implements OnInit {
   protected profileService = inject(ProfileService);
diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.html b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.html
index 732a81c76b..3f971be1ad 100644
--- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.html
+++ b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.html
@@ -135,7 +135,7 @@
             <i
               class="fa"
               aria-hidden="true"
-              [ngClass]="{
+              [class]="{
                 'fa-eye-slash': !showPassword,
                 'fa-eye': showPassword,
               }"
diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.ts b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.ts
index 696ce633a7..09a29a98a9 100644
--- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.ts
+++ b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.ts
@@ -49,7 +49,7 @@ import { eExtensibleComponents } from '../../enums/components';
 import { ExtensibleDateTimePickerComponent } from '../date-time-picker/extensible-date-time-picker.component';
 import { NgxValidateCoreModule } from '@ngx-validate/core';
 import { ExtensibleFormPropService } from '../../services/extensible-form-prop.service';
-import { AsyncPipe, NgClass, NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
+import { AsyncPipe, NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
 import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
 import { ExtensibleFormMultiselectComponent } from '../multi-select/extensible-form-multiselect.component';
 
@@ -70,11 +70,10 @@ import { ExtensibleFormMultiselectComponent } from '../multi-select/extensible-f
     PermissionDirective,
     LocalizationPipe,
     AsyncPipe,
-    NgClass,
     NgComponentOutlet,
     NgTemplateOutlet,
-    FormsModule,
-  ],
+    FormsModule
+],
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [ExtensibleFormPropService],
   viewProviders: [
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/page-alert-container/page-alert-container.component.html b/npm/ng-packs/packages/theme-basic/src/lib/components/page-alert-container/page-alert-container.component.html
index 86e9d40177..a2bd76ebd8 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/page-alert-container/page-alert-container.component.html
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/page-alert-container/page-alert-container.component.html
@@ -1,7 +1,7 @@
 @for (alert of service.alerts$ | async; track i; let i = $index) {
   <div
     class="alert alert-{{ alert.type }} fade show"
-    [ngClass]="{ 'alert-dismissible fade show': alert.dismissible }"
+    [class.alert-dismissible]="alert.dismissible" [class.fade]="alert.dismissible" [class.show]="alert.dismissible"
     role="alert"
   >
     @if (alert.title) {
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/page-alert-container/page-alert-container.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/page-alert-container/page-alert-container.component.ts
index f40ba2cd91..3e5aa72d8a 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/page-alert-container/page-alert-container.component.ts
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/page-alert-container/page-alert-container.component.ts
@@ -1,13 +1,13 @@
 import { Component, ViewEncapsulation, inject } from '@angular/core';
 import { PageAlertService } from '@abp/ng.theme.shared';
-import { NgClass, AsyncPipe } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import { LocalizationPipe, SafeHtmlPipe } from '@abp/ng.core';
 
 @Component({
   selector: 'abp-page-alert-container',
   templateUrl: './page-alert-container.component.html',
   encapsulation: ViewEncapsulation.None,
-  imports: [NgClass, AsyncPipe, LocalizationPipe, SafeHtmlPipe],
+  imports: [AsyncPipe, LocalizationPipe, SafeHtmlPipe],
 })
 export class PageAlertContainerComponent {
   service = inject(PageAlertService);
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/password/password.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/password/password.component.html
index fe1c9c51ce..0200a82a59 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/password/password.component.html
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/password/password.component.html
@@ -10,7 +10,7 @@
     <i
       class="fa"
       aria-hidden="true"
-      [ngClass]="{
+      [class]="{
         'fa-eye-slash': !fieldTextType,
         'fa-eye': fieldTextType
       }"
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/password/password.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/password/password.component.ts
index eeefb3ac01..24dffcbce0 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/password/password.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/password/password.component.ts
@@ -1,6 +1,6 @@
 import { Component, forwardRef, Input } from '@angular/core';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { NgClass } from '@angular/common';
+
 import { AbstractNgModelComponent } from '@abp/ng.core';
 import { NgxValidateCoreModule } from '@ngx-validate/core';
 
@@ -10,7 +10,7 @@ import { NgxValidateCoreModule } from '@ngx-validate/core';
  */
 @Component({
   selector: 'abp-password',
-  imports: [NgClass, FormsModule, NgxValidateCoreModule],
+  imports: [FormsModule, NgxValidateCoreModule],
   templateUrl: `./password.component.html`,
   providers: [
     {

From dbccb4ab8b45a5f56257ddf64139ffe2110aae4e Mon Sep 17 00:00:00 2001
From: Fahri Gedik <53567152+fahrigedik@users.noreply.github.com>
Date: Thu, 8 Jan 2026 13:19:07 +0300
Subject: [PATCH 2/5] Refactor style bindings to use [style] instead of
 [ngStyle]

Replaced [ngStyle] with [style] bindings in multiple components for improved Angular compatibility and performance. Removed unnecessary NgStyle imports from affected components and updated their module imports accordingly.
---
 .../feature-management.component.html         | 287 ++++++++----------
 .../permission-management.component.html      |   2 +-
 .../permission-management.component.ts        |   7 +-
 .../components/card/card-body.component.ts    |   6 +-
 .../components/card/card-footer.component.ts  |   6 +-
 .../components/card/card-header.component.ts  |   6 +-
 .../src/lib/components/card/card.component.ts |   6 +-
 .../components/checkbox/checkbox.component.ts |   6 +-
 .../form-input/form-input.component.ts        |   6 +-
 .../loader-bar/loader-bar.component.ts        | 234 +++++++-------
 10 files changed, 264 insertions(+), 302 deletions(-)

diff --git a/npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.html b/npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.html
index 257221add9..e1682708c5 100644
--- a/npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.html
+++ b/npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.html
@@ -1,181 +1,146 @@
 @if (visible) {
-  <abp-modal [(visible)]="visible" [busy]="modalBusy" [options]="{ size: 'lg' }">
-    <ng-template #abpHeader>
-      <h3>
-        {{ 'AbpFeatureManagement::Features' | abpLocalization }}
-        @if (providerTitle) {
-          - {{ providerTitle }}
-        }
-      </h3>
-    </ng-template>
+<abp-modal [(visible)]="visible" [busy]="modalBusy" [options]="{ size: 'lg' }">
+  <ng-template #abpHeader>
+    <h3>
+      {{ 'AbpFeatureManagement::Features' | abpLocalization }}
+      @if (providerTitle) {
+      - {{ providerTitle }}
+      }
+    </h3>
+  </ng-template>
 
-    <ng-template #abpBody>
-      <div class="row">
-        @if (groups.length) {
-          <div class="col-md-4">
-            <ul
-              ngbNav
-              #nav="ngbNav"
-              [(activeId)]="selectedGroupDisplayName"
-              class="nav-pills"
-              orientation="vertical"
-            >
-              @for (group of groups; track group.name) {
-                <li [ngbNavItem]="group.displayName">
-                  <a ngbNavLink>{{ group.displayName }}</a>
-                  <ng-template ngbNavContent>
-                    <h4>{{ selectedGroupDisplayName }}</h4>
-                    <hr class="mt-2 mb-3" />
+  <ng-template #abpBody>
+    <div class="row">
+      @if (groups.length) {
+      <div class="col-md-4">
+        <ul ngbNav #nav="ngbNav" [(activeId)]="selectedGroupDisplayName" class="nav-pills" orientation="vertical">
+          @for (group of groups; track group.name) {
+          <li [ngbNavItem]="group.displayName">
+            <a ngbNavLink>{{ group.displayName }}</a>
+            <ng-template ngbNavContent>
+              <h4>{{ selectedGroupDisplayName }}</h4>
+              <hr class="mt-2 mb-3" />
 
-                    @for (feature of features[group.name]; track feature.id || i; let i = $index) {
-                      @let provider = feature.provider.name;
-                      @let isFeatureDisabled = !feature.parentName ? isParentDisabled(feature.name, group.name, provider) :
-                        (provider !== providerName && provider !== defaultProviderName);
+              @for (feature of features[group.name]; track feature.id || i; let i = $index) {
+              @let provider = feature.provider.name;
+              @let isFeatureDisabled = !feature.parentName ? isParentDisabled(feature.name, group.name, provider) :
+              (provider !== providerName && provider !== defaultProviderName);
 
-                      <div class="mt-2" [ngStyle]="feature.style" (keyup.enter)="save()">
-                        @switch (feature.valueType?.name) {
-                          @case (valueTypes.ToggleStringValueType) {
-                            <div class="form-check" [class.px-4]="!!feature.parentName">
-                              <input
-                                class="form-check-input"
-                                type="checkbox"
-                                [id]="feature.name"
-                                [(ngModel)]="feature.value"
-                                (ngModelChange)="onCheckboxClick($event, feature)"
-                                [disabled]="isFeatureDisabled"
-                              />
+              <div class="mt-2" [style]="feature.style" (keyup.enter)="save()">
+                @switch (feature.valueType?.name) {
+                @case (valueTypes.ToggleStringValueType) {
+                <div class="form-check" [class.px-4]="!!feature.parentName">
+                  <input class="form-check-input" type="checkbox" [id]="feature.name" [(ngModel)]="feature.value"
+                    (ngModelChange)="onCheckboxClick($event, feature)" [disabled]="isFeatureDisabled" />
 
-                              <label class="form-check-label" [htmlFor]="feature.name">
-                                {{ feature.displayName }}
-                                @if (isFeatureDisabled) {
-                                  <span>({{ provider }})</span>
-                                }
-                              </label>
-                              <ng-container
-                                *ngTemplateOutlet="
+                  <label class="form-check-label" [htmlFor]="feature.name">
+                    {{ feature.displayName }}
+                    @if (isFeatureDisabled) {
+                    <span>({{ provider }})</span>
+                    }
+                  </label>
+                  <ng-container *ngTemplateOutlet="
                                   descTmp;
                                   context: { $implicit: feature.description }
-                                "
-                              ></ng-container>
-                            </div>
-                          }
-                          @case (valueTypes.FreeTextStringValueType) {
-                            <div class="mb-3 form-group" [class.px-2]="!!feature.parentName">
-                              <label [htmlFor]="feature.name" class="form-label">
-                                {{ feature.displayName }}
-                                @if (isFeatureDisabled) {
-                                  <span>({{ provider }})</span>
-                                }
-                              </label>
-                              <input
-                                class="form-control"
-                                type="text"
-                                [id]="feature.name"
-                                [(ngModel)]="feature.value"
-                                [abpFeatureManagementFreeText]="feature"
-                                [disabled]="isFeatureDisabled"
-                              />
+                                "></ng-container>
+                </div>
+                }
+                @case (valueTypes.FreeTextStringValueType) {
+                <div class="mb-3 form-group" [class.px-2]="!!feature.parentName">
+                  <label [htmlFor]="feature.name" class="form-label">
+                    {{ feature.displayName }}
+                    @if (isFeatureDisabled) {
+                    <span>({{ provider }})</span>
+                    }
+                  </label>
+                  <input class="form-control" type="text" [id]="feature.name" [(ngModel)]="feature.value"
+                    [abpFeatureManagementFreeText]="feature" [disabled]="isFeatureDisabled" />
 
-                              <ng-container
-                                *ngTemplateOutlet="
+                  <ng-container *ngTemplateOutlet="
                                   descTmp;
                                   context: { $implicit: feature.description }
-                                "
-                              ></ng-container>
-                            </div>
-                          }
-                          @case (valueTypes.SelectionStringValueType) {
-                            @if (feature.valueType.itemSource?.items?.length) {
-                              <div class="mb-3 form-group" [class.px-2]="!!feature.parentName">
-                                <label [htmlFor]="feature.name" class="form-label">
-                                  {{ feature.displayName }}
-                                  @if (isFeatureDisabled) {
-                                    <span>({{ provider }})</span>
-                                  }
-                                </label>
-                                <select
-                                  class="form-select"
-                                  [id]="feature.name"
-                                  [(ngModel)]="feature.value"
-                                  [disabled]="isFeatureDisabled"
-                                >
-                                  @for (
-                                    item of feature.valueType.itemSource?.items;
-                                    track item.value
-                                  ) {
-                                    <option [ngValue]="item.value">
-                                      {{
-                                        item.displayText?.resourceName +
-                                          '::' +
-                                          item.displayText?.name | abpLocalization
-                                      }}
-                                    </option>
-                                  }
-                                </select>
-                                <ng-container
-                                  *ngTemplateOutlet="
+                                "></ng-container>
+                </div>
+                }
+                @case (valueTypes.SelectionStringValueType) {
+                @if (feature.valueType.itemSource?.items?.length) {
+                <div class="mb-3 form-group" [class.px-2]="!!feature.parentName">
+                  <label [htmlFor]="feature.name" class="form-label">
+                    {{ feature.displayName }}
+                    @if (isFeatureDisabled) {
+                    <span>({{ provider }})</span>
+                    }
+                  </label>
+                  <select class="form-select" [id]="feature.name" [(ngModel)]="feature.value"
+                    [disabled]="isFeatureDisabled">
+                    @for (
+                    item of feature.valueType.itemSource?.items;
+                    track item.value
+                    ) {
+                    <option [ngValue]="item.value">
+                      {{
+                      item.displayText?.resourceName +
+                      '::' +
+                      item.displayText?.name | abpLocalization
+                      }}
+                    </option>
+                    }
+                  </select>
+                  <ng-container *ngTemplateOutlet="
                                     descTmp;
                                     context: { $implicit: feature.description }
-                                  "
-                                ></ng-container>
-                              </div>
-                            }
-                          }
-                          @default {
-                            {{ feature.displayName }}
-                          }
-                        }
-                      </div>
-                    }
-                  </ng-template>
-                </li>
+                                  "></ng-container>
+                </div>
+                }
+                }
+                @default {
+                {{ feature.displayName }}
+                }
+                }
+              </div>
               }
-            </ul>
-          </div>
-
-          <ng-template #descTmp let-description>
-            @if (description) {
-              <small class="d-block form-text text-muted">{{ description }}</small>
-            }
-          </ng-template>
+            </ng-template>
+          </li>
+          }
+        </ul>
+      </div>
 
-          <div class="col-md-8"><div class="py-0" [ngbNavOutlet]="nav"></div></div>
+      <ng-template #descTmp let-description>
+        @if (description) {
+        <small class="d-block form-text text-muted">{{ description }}</small>
         }
+      </ng-template>
 
-        @if (!groups.length) {
-          <div class="col">
-            {{ 'AbpFeatureManagement::NoFeatureFoundMessage' | abpLocalization }}
-          </div>
-        }
+      <div class="col-md-8">
+        <div class="py-0" [ngbNavOutlet]="nav"></div>
       </div>
-    </ng-template>
-
-    <ng-template #abpFooter>
-      <button abpClose type="button" class="btn btn-link">
-        {{ 'AbpFeatureManagement::Cancel' | abpLocalization }}
-      </button>
-
-      @if (groups.length) {
-        <abp-button
-          buttonClass="btn btn-outline-primary"
-          [disabled]="modalBusy"
-          (click)="resetToDefault()"
-          aria-hidden="true"
-        >
-          {{ 'AbpFeatureManagement::ResetToDefault' | abpLocalization }}
-        </abp-button>
       }
 
-      @if (groups.length) {
-        <abp-button
-          iconClass="fa fa-check"
-          [disabled]="modalBusy"
-          (click)="save()"
-          aria-hidden="true"
-        >
-          {{ 'AbpFeatureManagement::Save' | abpLocalization }}
-        </abp-button>
+      @if (!groups.length) {
+      <div class="col">
+        {{ 'AbpFeatureManagement::NoFeatureFoundMessage' | abpLocalization }}
+      </div>
       }
-    </ng-template>
-  </abp-modal>
-}
+    </div>
+  </ng-template>
+
+  <ng-template #abpFooter>
+    <button abpClose type="button" class="btn btn-link">
+      {{ 'AbpFeatureManagement::Cancel' | abpLocalization }}
+    </button>
+
+    @if (groups.length) {
+    <abp-button buttonClass="btn btn-outline-primary" [disabled]="modalBusy" (click)="resetToDefault()"
+      aria-hidden="true">
+      {{ 'AbpFeatureManagement::ResetToDefault' | abpLocalization }}
+    </abp-button>
+    }
+
+    @if (groups.length) {
+    <abp-button iconClass="fa fa-check" [disabled]="modalBusy" (click)="save()" aria-hidden="true">
+      {{ 'AbpFeatureManagement::Save' | abpLocalization }}
+    </abp-button>
+    }
+  </ng-template>
+</abp-modal>
+}
\ No newline at end of file
diff --git a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html
index 32fe44e488..64fb73b35c 100644
--- a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html
+++ b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html
@@ -90,7 +90,7 @@
                 </div>
                 <hr class="my-2" />
                 @for (permission of selectedGroupPermissions; track $index; let i = $index) {
-                  <div [ngStyle]="permission.style" class="form-check mb-2">
+                  <div [style]="permission.style" class="form-check mb-2">
                     <input
                       #permissionCheckbox
                       type="checkbox"
diff --git a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts
index 2c7a4e57ec..874f240711 100644
--- a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts
+++ b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts
@@ -31,7 +31,7 @@ import {
 import { concat, of } from 'rxjs';
 import { finalize, switchMap, take, tap } from 'rxjs/operators';
 import { PermissionManagement } from '../models';
-import { NgStyle } from '@angular/common';
+
 import { FormsModule } from '@angular/forms';
 
 type PermissionWithStyle = PermissionGrantInfoDto & {
@@ -95,12 +95,11 @@ type PermissionWithGroupName = PermissionGrantInfoDto & {
   ],
   imports: [
     FormsModule,
-    NgStyle,
     ModalComponent,
     LocalizationPipe,
     ButtonComponent,
-    ModalCloseDirective,
-  ],
+    ModalCloseDirective
+],
 })
 export class PermissionManagementComponent
   implements
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-body.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-body.component.ts
index 35790054b5..af94c0e1c9 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-body.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-body.component.ts
@@ -1,12 +1,12 @@
 import { Component, HostBinding, Input } from '@angular/core';
-import { NgClass, NgStyle } from '@angular/common';
+import { NgClass } from '@angular/common';
 
 @Component({
   selector: 'abp-card-body',
-  template: ` <div [ngClass]="cardBodyClass" [ngStyle]="cardBodyStyle">
+  template: ` <div [ngClass]="cardBodyClass" [style]="cardBodyStyle">
     <ng-content></ng-content>
   </div>`,
-  imports: [NgClass, NgStyle],
+  imports: [NgClass],
 })
 export class CardBodyComponent {
   @HostBinding('class') componentClass = 'card-body';
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-footer.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-footer.component.ts
index 38a798e146..333b7577e4 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-footer.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-footer.component.ts
@@ -1,15 +1,15 @@
 import { Component, HostBinding, Input } from '@angular/core';
-import { NgClass, NgStyle } from '@angular/common';
+import { NgClass } from '@angular/common';
 
 @Component({
   selector: 'abp-card-footer',
   template: `
-    <div [ngStyle]="cardFooterStyle" [ngClass]="cardFooterClass">
+    <div [style]="cardFooterStyle" [ngClass]="cardFooterClass">
       <ng-content></ng-content>
     </div>
   `,
   styles: [],
-  imports: [NgClass, NgStyle],
+  imports: [NgClass],
 })
 export class CardFooterComponent {
   @HostBinding('class') componentClass = 'card-footer';
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-header.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-header.component.ts
index 4857913d77..9598c38ff5 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-header.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-header.component.ts
@@ -1,15 +1,15 @@
 import { Component, HostBinding, Input } from '@angular/core';
-import { NgClass, NgStyle } from '@angular/common';
+import { NgClass } from '@angular/common';
 
 @Component({
   selector: 'abp-card-header',
   template: `
-    <div [ngClass]="cardHeaderClass" [ngStyle]="cardHeaderStyle">
+    <div [ngClass]="cardHeaderClass" [style]="cardHeaderStyle">
       <ng-content></ng-content>
     </div>
   `,
   styles: [],
-  imports: [NgClass, NgStyle],
+  imports: [NgClass],
 })
 export class CardHeaderComponent {
   @HostBinding('class') componentClass = 'card-header';
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card.component.ts
index 42973fdcb0..1f941bcb7e 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card.component.ts
@@ -1,12 +1,12 @@
 import { Component, Input } from '@angular/core';
-import { NgClass, NgStyle } from '@angular/common';
+import { NgClass } from '@angular/common';
 
 @Component({
   selector: 'abp-card',
-  template: ` <div class="card" [ngClass]="cardClass" [ngStyle]="cardStyle">
+  template: ` <div class="card" [ngClass]="cardClass" [style]="cardStyle">
     <ng-content></ng-content>
   </div>`,
-  imports: [NgClass, NgStyle],
+  imports: [NgClass],
 })
 export class CardComponent {
   @Input() cardClass: string;
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts
index 8cadf828d1..7be8551c2b 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts
@@ -1,6 +1,6 @@
 import { Component, EventEmitter, forwardRef, Input, Output } from '@angular/core';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
-import { NgClass, NgStyle } from '@angular/common';
+import { NgClass } from '@angular/common';
 import { AbstractNgModelComponent, LocalizationPipe } from '@abp/ng.core';
 
 @Component({
@@ -13,7 +13,7 @@ import { AbstractNgModelComponent, LocalizationPipe } from '@abp/ng.core';
         [id]="checkboxId"
         [readonly]="checkboxReadonly"
         [ngClass]="checkboxClass"
-        [ngStyle]="checkboxStyle"
+        [style]="checkboxStyle"
         (blur)="checkboxBlur.next()"
         (focus)="checkboxFocus.next()"
       />
@@ -31,7 +31,7 @@ import { AbstractNgModelComponent, LocalizationPipe } from '@abp/ng.core';
       multi: true,
     },
   ],
-  imports: [NgClass, NgStyle, FormsModule, LocalizationPipe],
+  imports: [NgClass, FormsModule, LocalizationPipe],
 })
 export class FormCheckboxComponent extends AbstractNgModelComponent {
   @Input() label?: string;
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.ts
index 2d10ab5709..401cf22250 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.ts
@@ -1,6 +1,6 @@
 import { Component, EventEmitter, forwardRef, Input, Output } from '@angular/core';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { NgClass, NgStyle } from '@angular/common';
+import { NgClass } from '@angular/common';
 import { AbstractNgModelComponent, LocalizationPipe } from '@abp/ng.core';
 
 @Component({
@@ -18,7 +18,7 @@ import { AbstractNgModelComponent, LocalizationPipe } from '@abp/ng.core';
         [placeholder]="inputPlaceholder"
         [readonly]="inputReadonly"
         [ngClass]="inputClass"
-        [ngStyle]="inputStyle"
+        [style]="inputStyle"
         (blur)="formBlur.next()"
         (focus)="formFocus.next()"
         [(ngModel)]="value"
@@ -32,7 +32,7 @@ import { AbstractNgModelComponent, LocalizationPipe } from '@abp/ng.core';
       multi: true,
     },
   ],
-  imports: [NgClass, NgStyle, LocalizationPipe, FormsModule],
+  imports: [NgClass, LocalizationPipe, FormsModule],
 })
 export class FormInputComponent extends AbstractNgModelComponent {
   @Input() inputId!: string;
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts
index 244b055322..81e2d6597f 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts
@@ -1,118 +1,116 @@
-import { NgClass, NgStyle } from '@angular/common';
-import { ChangeDetectorRef, Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
-import { combineLatest, Subscription, timer } from 'rxjs';
-import { HttpWaitService, RouterWaitService, SubscriptionService } from '@abp/ng.core';
-
-@Component({
-  selector: 'abp-loader-bar',
-  template: `
-    <div id="abp-loader-bar" [ngClass]="containerClass" [class.is-loading]="isLoading">
-      <div
-        class="abp-progress"
-        [class.progressing]="progressLevel"
-        [style.width.vw]="progressLevel"
-        [ngStyle]="{
-          'background-color': color,
-          'box-shadow': boxShadow,
-        }"
-      ></div>
-    </div>
-  `,
-  styleUrls: ['./loader-bar.component.scss'],
-  providers: [SubscriptionService],
-  imports: [NgClass, NgStyle],
-})
-export class LoaderBarComponent implements OnDestroy, OnInit {
-  private cdRef = inject(ChangeDetectorRef);
-  private subscription = inject(SubscriptionService);
-  private httpWaitService = inject(HttpWaitService);
-  private routerWaitService = inject(RouterWaitService);
-
-  protected _isLoading!: boolean;
-
-  @Input()
-  set isLoading(value: boolean) {
-    this._isLoading = value;
-    this.cdRef.detectChanges();
-  }
-  get isLoading(): boolean {
-    return this._isLoading;
-  }
-
-  @Input()
-  containerClass = 'abp-loader-bar';
-
-  @Input()
-  color = '#77b6ff';
-
-  progressLevel = 0;
-
-  interval = new Subscription();
-
-  timer = new Subscription();
-
-  intervalPeriod = 350;
-
-  stopDelay = 800;
-
-  private readonly clearProgress = () => {
-    this.progressLevel = 0;
-    this.cdRef.detectChanges();
-  };
-
-  private readonly reportProgress = () => {
-    if (this.progressLevel < 75) {
-      this.progressLevel += 1 + Math.random() * 9;
-    } else if (this.progressLevel < 90) {
-      this.progressLevel += 0.4;
-    } else if (this.progressLevel < 100) {
-      this.progressLevel += 0.1;
-    } else {
-      this.interval.unsubscribe();
-    }
-    this.cdRef.detectChanges();
-  };
-
-  get boxShadow(): string {
-    return `0 0 10px rgba(${this.color}, 0.5)`;
-  }
-
-  ngOnInit() {
-    this.subscribeLoading();
-  }
-
-  subscribeLoading() {
-    this.subscription.addOne(
-      combineLatest([this.httpWaitService.getLoading$(), this.routerWaitService.getLoading$()]),
-      ([httpLoading, routerLoading]) => {
-        if (httpLoading || routerLoading) this.startLoading();
-        else this.stopLoading();
-      },
-    );
-  }
-
-  ngOnDestroy() {
-    this.interval.unsubscribe();
-  }
-
-  startLoading() {
-    if (this.isLoading || !this.interval.closed) return;
-
-    this.isLoading = true;
-    this.progressLevel = 0;
-    this.cdRef.detectChanges();
-    this.interval = timer(0, this.intervalPeriod).subscribe(this.reportProgress);
-    this.timer.unsubscribe();
-  }
-
-  stopLoading() {
-    this.interval.unsubscribe();
-
-    this.progressLevel = 100;
-    this.isLoading = false;
-
-    if (!this.timer.closed) return;
-
-    this.timer = timer(this.stopDelay).subscribe(this.clearProgress);
-  }
-}
+import { NgClass }ngular/common';
+import { ChangeDetectorRef, Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
+import { combineLatest, Subscription, timer } from 'rxjs';
+import { HttpWaitService, RouterWaitService, SubscriptionService } from '@abp/ng.core';
+
+@Component({
+  selector: 'abp-loader-bar',
+  template: `
+    <di
+    <div id="abp-loader-bar" [ngClass]="containerClass" [class.is-loading]="isLoading">
+      <div
+        class="abp-progress"
+        [class.progressing]="progressLevel"
+        [style.width.vw]="progressLevel"
+        [style]="{
+          'background-color': color,
+          'box-shadow': boxShadow,
+        }"
+      ></div>
+    </div>
+  Urls: ['./loader-bar.component.scss'],
+  providers: [SubscriptionService],
+  imports: [NgClass],
[NgClass]LoaderBarComponent implements OnDestroy, OnInit {
+  private cdRef = inject(ChangeDetectorRef);
+  private subscription = inject(SubscriptionService);
+  private httpWaitService = inject(HttpWaitService);
+  private routerWaitService = inject(RouterWaitService);
+
+  protected _isLoading!: boolean;
+
+  @Input()
+  set isLoading(value: boolean) {
+    this._isLoading = value;
+    this.cdRef.detectChanges();
+  }
+  get isLoading(): boolean {
+    return this._isLoading;
+  }
+
+  @Input()
+  containerClass = 'abp-loader-bar';
+
+  @Input()
+  color = '#77b6ff';
+
+  progressLevel = 0;
+
+  interval = new Subscription();
+
+  timer = new Subscription();
+
+  intervalPeriod = 350;
+
+  stopDelay = 800;
+
+  private readonly clearProgress = () => {
+    this.progressLevel = 0;
+    this.cdRef.detectChanges();
+  };
+
+  private readonly reportProgress = () => {
+    if (this.progressLevel < 75) {
+      this.progressLevel += 1 + Math.random() * 9;
+    } else if (this.progressLevel < 90) {
+      this.progressLevel += 0.4;
+    } else if (this.progressLevel < 100) {
+      this.progressLevel += 0.1;
+    } else {
+      this.interval.unsubscribe();
+    }
+    this.cdRef.detectChanges();
+  };
+
+  get boxShadow(): string {
+    return `0 0 10px rgba(${this.color}, 0.5)`;
+  }
+
+  ngOnInit() {
+    this.subscribeLoading();
+  }
+
+  subscribeLoading() {
+    this.subscription.addOne(
+      combineLatest([this.httpWaitService.getLoading$(), this.routerWaitService.getLoading$()]),
+      ([httpLoading, routerLoading]) => {
+        if (httpLoading || routerLoading) this.startLoading();
+        else this.stopLoading();
+      },
+    );
+  }
+
+  ngOnDestroy() {
+    this.interval.unsubscribe();
+  }
+
+  startLoading() {
+    if (this.isLoading || !this.interval.closed) return;
+
+    this.isLoading = true;
+    this.progressLevel = 0;
+    this.cdRef.detectChanges();
+    this.interval = timer(0, this.intervalPeriod).subscribe(this.reportProgress);
+    this.timer.unsubscribe();
+  }
+
+  stopLoading() {
+    this.interval.unsubscribe();
+
+    this.progressLevel = 100;
+    this.isLoading = false;
+
+    if (!this.timer.closed) return;
+
+    this.timer = timer(this.stopDelay).subscribe(this.clearProgress);
+  }
+}

From ca0172ba023bf10d9a9b8b06ae4181fb172df0dc Mon Sep 17 00:00:00 2001
From: Fahri Gedik <53567152+fahrigedik@users.noreply.github.com>
Date: Thu, 8 Jan 2026 13:29:48 +0300
Subject: [PATCH 3/5] Refactor Angular imports for component modules

Replaced CommonModule with more specific Angular imports (NgTemplateOutlet, NgClass) in several components to optimize module usage and reduce unnecessary dependencies. Also removed unused CommonModule import from email-setting-group and http-error-wrapper components.
---
 .../components/lookup/src/lib/lookup-search.component.ts   | 4 ++--
 .../email-setting-group/email-setting-group.component.ts   | 7 +++----
 .../src/lib/components/button/button.component.ts          | 4 ++--
 .../http-error-wrapper/http-error-wrapper.component.ts     | 4 ++--
 4 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/npm/ng-packs/packages/components/lookup/src/lib/lookup-search.component.ts b/npm/ng-packs/packages/components/lookup/src/lib/lookup-search.component.ts
index b78bfa19ce..6b4f475edd 100644
--- a/npm/ng-packs/packages/components/lookup/src/lib/lookup-search.component.ts
+++ b/npm/ng-packs/packages/components/lookup/src/lib/lookup-search.component.ts
@@ -12,7 +12,7 @@ import {
   inject,
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { CommonModule } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { LocalizationPipe } from '@abp/ng.core';
 import { Subject, Observable, debounceTime, distinctUntilChanged, of, finalize } from 'rxjs';
@@ -29,7 +29,7 @@ export type LookupSearchFn<T = LookupItem> = (filter: string) => Observable<T[]>
   selector: 'abp-lookup-search',
   templateUrl: './lookup-search.component.html',
   styleUrl: './lookup-search.component.scss',
-  imports: [CommonModule, FormsModule, LocalizationPipe],
+  imports: [FormsModule, LocalizationPipe, NgTemplateOutlet],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class LookupSearchComponent<T extends LookupItem = LookupItem> implements OnInit {
diff --git a/npm/ng-packs/packages/setting-management/config/src/lib/components/email-setting-group/email-setting-group.component.ts b/npm/ng-packs/packages/setting-management/config/src/lib/components/email-setting-group/email-setting-group.component.ts
index bb5f6fe6ee..d2e1dae003 100644
--- a/npm/ng-packs/packages/setting-management/config/src/lib/components/email-setting-group/email-setting-group.component.ts
+++ b/npm/ng-packs/packages/setting-management/config/src/lib/components/email-setting-group/email-setting-group.component.ts
@@ -25,7 +25,7 @@ import {
   PermissionDirective
 } from '@abp/ng.core';
 import { NgxValidateCoreModule } from '@ngx-validate/core';
-import { CommonModule } from '@angular/common';
+
 
 const { required, email } = Validators;
 
@@ -35,14 +35,13 @@ const { required, email } = Validators;
   animations: [collapse],
   imports: [
     ReactiveFormsModule,
-    CommonModule,
     LocalizationPipe,
     ButtonComponent,
     ModalComponent,
     ModalCloseDirective,
     NgxValidateCoreModule,
-    PermissionDirective,
-  ],
+    PermissionDirective
+],
 })
 export class EmailSettingGroupComponent implements OnInit {
   private emailSettingsService = inject(EmailSettingsService);
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/button/button.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/button/button.component.ts
index 7388eb47ef..81a2669491 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/button/button.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/button/button.component.ts
@@ -10,7 +10,7 @@ import {
   ViewChild,
   inject,
 } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { NgClass } from '@angular/common';
 import { ABP, StopPropagationDirective } from '@abp/ng.core';
 
 @Component({
@@ -30,7 +30,7 @@ import { ABP, StopPropagationDirective } from '@abp/ng.core';
       <i [ngClass]="icon" class="me-1" aria-hidden="true"></i><ng-content></ng-content>
     </button>
   `,
-  imports: [CommonModule, StopPropagationDirective],
+  imports: [StopPropagationDirective, NgClass],
 })
 export class ButtonComponent implements OnInit {
   private renderer = inject(Renderer2);
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.ts
index 572d860506..24e7fae1d6 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.ts
@@ -14,7 +14,7 @@ import {
   DestroyRef,
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { CommonModule, DOCUMENT } from '@angular/common';
+import { DOCUMENT } from '@angular/common';
 import { Router } from '@angular/router';
 import { fromEvent, Subject } from 'rxjs';
 import { debounceTime, filter } from 'rxjs/operators';
@@ -25,7 +25,7 @@ import { ErrorScreenErrorCodes } from '../../models';
   selector: 'abp-http-error-wrapper',
   templateUrl: './http-error-wrapper.component.html',
   styleUrls: ['http-error-wrapper.component.scss'],
-  imports: [CommonModule, LocalizationPipe],
+  imports: [LocalizationPipe],
 })
 export class HttpErrorWrapperComponent implements OnInit, AfterViewInit, OnDestroy {
   protected readonly destroyRef = inject(DestroyRef);

From a03b33eb7afd3c5327b63b1b33a29dd8a830957c Mon Sep 17 00:00:00 2001
From: Fahri Gedik <53567152+fahrigedik@users.noreply.github.com>
Date: Thu, 8 Jan 2026 14:26:29 +0300
Subject: [PATCH 4/5] Refactor to replace NgClass with class binding

Replaces all usages of [ngClass] with [class] bindings in component templates and removes NgClass from component imports. This simplifies the code, improves performance, and ensures compatibility with standalone Angular components.
---
 .../extensible-form-prop.component.html       | 240 +++++++-----------
 .../extensible-form.component.html            |  65 ++---
 .../extensible-form.component.ts              |   4 +-
 .../extensible-table.component.html           | 151 ++++-------
 .../grid-actions/grid-actions.component.html  | 103 +++-----
 .../grid-actions/grid-actions.component.ts    |  13 +-
 .../page-toolbar/page-toolbar.component.html  |  26 +-
 .../page-toolbar/page-toolbar.component.ts    |   8 +-
 .../components/routes/routes.component.html   | 101 +++-----
 .../lib/components/routes/routes.component.ts |   3 +-
 .../lib/components/button/button.component.ts |   7 +-
 .../components/card/card-body.component.ts    |   4 +-
 .../components/card/card-footer.component.ts  |   5 +-
 .../components/card/card-header.component.ts  |   5 +-
 .../src/lib/components/card/card.component.ts |   5 +-
 .../components/checkbox/checkbox.component.ts |  11 +-
 .../confirmation/confirmation.component.html  |  77 +++---
 .../confirmation/confirmation.component.ts    |   4 +-
 .../form-input/form-input.component.ts        |  11 +-
 .../loader-bar/loader-bar.component.ts        | 233 ++++++++---------
 .../lib/components/toast/toast.component.html |  18 +-
 .../lib/components/toast/toast.component.ts   |   3 +-
 .../angular/src/app/home/home.component.html  |  74 ++----
 .../angular/src/app/home/home.component.html  |  74 ++----
 24 files changed, 487 insertions(+), 758 deletions(-)

diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.html b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.html
index 3f971be1ad..2f9df1ae00 100644
--- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.html
+++ b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.html
@@ -1,177 +1,113 @@
 <ng-container *abpPermission="prop.permission; runChangeDetection: false">
   @switch (getComponent(prop)) {
-    @case ('template') {
-      <ng-container *ngComponentOutlet="prop.template; injector: injectorForCustomComponent" />
-    }
+  @case ('template') {
+  <ng-container *ngComponentOutlet="prop.template; injector: injectorForCustomComponent" />
+  }
   }
 
-  <div [ngClass]="containerClassName" class="mb-2">
+  <div [class]="containerClassName" class="mb-2">
     @switch (getComponent(prop)) {
-      @case ('input') {
-        <ng-template [ngTemplateOutlet]="label" />
-        <input
-          #field
-          [id]="prop.id"
-          [formControlName]="prop.name"
-          [autocomplete]="prop.autocomplete"
-          [type]="getType(prop)"
-          [abpDisabled]="disabled"
-          [readonly]="readonly"
-          class="form-control"
-        />
-      }
-      @case ('hidden') {
-        <input [formControlName]="prop.name" type="hidden" />
-      }
-      @case ('checkbox') {
-        <div class="form-check" validationTarget>
-          <input
-            #field
-            [id]="prop.id"
-            [formControlName]="prop.name"
-            [abpDisabled]="disabled"
-            type="checkbox"
-            class="form-check-input"
-          />
-          <ng-template
-            [ngTemplateOutlet]="label"
-            [ngTemplateOutletContext]="{ $implicit: 'form-check-label' }"
-          />
-        </div>
-      }
-      @case ('select') {
-        <ng-template [ngTemplateOutlet]="label" />
-        <select
-          #field
-          [id]="prop.id"
-          [formControlName]="prop.name"
-          [abpDisabled]="disabled"
-          class="form-select form-control"
-        >
-          @for (option of options$ | async; track option.value) {
-            <option [ngValue]="option.value">
-              @if (prop.isExtra) {
-                {{ '::' + option.key | abpLocalization }}
-              } @else {
-                {{ option.key }}
-              }
-            </option>
-          }
-        </select>
-      }
-      @case ('multiselect') {
-        <ng-template [ngTemplateOutlet]="label"></ng-template>
-        <abp-extensible-form-multi-select
-          [prop]="prop"
-          [options]="options$ | async"
-          [formControlName]="prop.name"
-          [abpDisabled]="disabled"
-        />
-      }
-      @case ('typeahead') {
-        <ng-template [ngTemplateOutlet]="label" />
-        <div #typeahead class="position-relative" validationStyle validationTarget>
-          <input
-            #field
-            [id]="prop.id"
-            [autocomplete]="prop.autocomplete"
-            [abpDisabled]="disabled"
-            [ngbTypeahead]="search"
-            [editable]="false"
-            [inputFormatter]="typeaheadFormatter"
-            [resultFormatter]="typeaheadFormatter"
-            [ngModelOptions]="{ standalone: true }"
-            [(ngModel)]="typeaheadModel"
-            (selectItem)="setTypeaheadValue($event.item)"
-            (blur)="setTypeaheadValue(typeaheadModel)"
-            [class.is-invalid]="typeahead.classList.contains('is-invalid')"
-            class="form-control"
-          />
-          <input [formControlName]="prop.name" type="hidden" />
-        </div>
-      }
-      @case ('date') {
-        <ng-template [ngTemplateOutlet]="label" />
-        <input
-          [id]="prop.id"
-          [formControlName]="prop.name"
-          (click)="datepicker.open()"
-          (keyup.space)="datepicker.open()"
-          ngbDatepicker
-          #datepicker="ngbDatepicker"
-          type="text"
-          class="form-control"
-        />
-      }
-      @case ('time') {
-        <ng-template [ngTemplateOutlet]="label" />
-        <ngb-timepicker [formControlName]="prop.name" />
-      }
-      @case ('dateTime') {
-        <ng-template [ngTemplateOutlet]="label" />
-        <abp-extensible-date-time-picker [prop]="prop" [meridian]="meridian$ | async" />
-      }
-      @case ('textarea') {
-        <ng-template [ngTemplateOutlet]="label" />
-        <textarea
-          #field
-          [id]="prop.id"
-          [formControlName]="prop.name"
-          [abpDisabled]="disabled"
-          [readonly]="readonly"
-          class="form-control"
-        ></textarea>
+    @case ('input') {
+    <ng-template [ngTemplateOutlet]="label" />
+    <input #field [id]="prop.id" [formControlName]="prop.name" [autocomplete]="prop.autocomplete" [type]="getType(prop)"
+      [abpDisabled]="disabled" [readonly]="readonly" class="form-control" />
+    }
+    @case ('hidden') {
+    <input [formControlName]="prop.name" type="hidden" />
+    }
+    @case ('checkbox') {
+    <div class="form-check" validationTarget>
+      <input #field [id]="prop.id" [formControlName]="prop.name" [abpDisabled]="disabled" type="checkbox"
+        class="form-check-input" />
+      <ng-template [ngTemplateOutlet]="label" [ngTemplateOutletContext]="{ $implicit: 'form-check-label' }" />
+    </div>
+    }
+    @case ('select') {
+    <ng-template [ngTemplateOutlet]="label" />
+    <select #field [id]="prop.id" [formControlName]="prop.name" [abpDisabled]="disabled"
+      class="form-select form-control">
+      @for (option of options$ | async; track option.value) {
+      <option [ngValue]="option.value">
+        @if (prop.isExtra) {
+        {{ '::' + option.key | abpLocalization }}
+        } @else {
+        {{ option.key }}
+        }
+      </option>
       }
-      @case ('passwordinputgroup') {
-        <ng-template [ngTemplateOutlet]="label" />
-        <div class="input-group form-group" validationTarget>
-          <input
-            class="form-control"
-            [id]="prop.id"
-            [formControlName]="prop.name"
-            [abpShowPassword]="showPassword"
-          />
-          <button class="btn btn-secondary" type="button" (click)="showPassword = !showPassword">
-            <i
-              class="fa"
-              aria-hidden="true"
-              [class]="{
+    </select>
+    }
+    @case ('multiselect') {
+    <ng-template [ngTemplateOutlet]="label"></ng-template>
+    <abp-extensible-form-multi-select [prop]="prop" [options]="options$ | async" [formControlName]="prop.name"
+      [abpDisabled]="disabled" />
+    }
+    @case ('typeahead') {
+    <ng-template [ngTemplateOutlet]="label" />
+    <div #typeahead class="position-relative" validationStyle validationTarget>
+      <input #field [id]="prop.id" [autocomplete]="prop.autocomplete" [abpDisabled]="disabled" [ngbTypeahead]="search"
+        [editable]="false" [inputFormatter]="typeaheadFormatter" [resultFormatter]="typeaheadFormatter"
+        [ngModelOptions]="{ standalone: true }" [(ngModel)]="typeaheadModel"
+        (selectItem)="setTypeaheadValue($event.item)" (blur)="setTypeaheadValue(typeaheadModel)"
+        [class.is-invalid]="typeahead.classList.contains('is-invalid')" class="form-control" />
+      <input [formControlName]="prop.name" type="hidden" />
+    </div>
+    }
+    @case ('date') {
+    <ng-template [ngTemplateOutlet]="label" />
+    <input [id]="prop.id" [formControlName]="prop.name" (click)="datepicker.open()" (keyup.space)="datepicker.open()"
+      ngbDatepicker #datepicker="ngbDatepicker" type="text" class="form-control" />
+    }
+    @case ('time') {
+    <ng-template [ngTemplateOutlet]="label" />
+    <ngb-timepicker [formControlName]="prop.name" />
+    }
+    @case ('dateTime') {
+    <ng-template [ngTemplateOutlet]="label" />
+    <abp-extensible-date-time-picker [prop]="prop" [meridian]="meridian$ | async" />
+    }
+    @case ('textarea') {
+    <ng-template [ngTemplateOutlet]="label" />
+    <textarea #field [id]="prop.id" [formControlName]="prop.name" [abpDisabled]="disabled" [readonly]="readonly"
+      class="form-control"></textarea>
+    }
+    @case ('passwordinputgroup') {
+    <ng-template [ngTemplateOutlet]="label" />
+    <div class="input-group form-group" validationTarget>
+      <input class="form-control" [id]="prop.id" [formControlName]="prop.name" [abpShowPassword]="showPassword" />
+      <button class="btn btn-secondary" type="button" (click)="showPassword = !showPassword">
+        <i class="fa" aria-hidden="true" [class]="{
                 'fa-eye-slash': !showPassword,
                 'fa-eye': showPassword,
-              }"
-            ></i>
-          </button>
-        </div>
-      }
+              }"></i>
+      </button>
+    </div>
+    }
     }
 
     @if (prop.formText) {
-      <small class="text-muted d-block">{{ prop.formText | abpLocalization }}</small>
+    <small class="text-muted d-block">{{ prop.formText | abpLocalization }}</small>
     }
   </div>
 </ng-container>
 
 <ng-template #label let-classes>
-  <label [htmlFor]="prop.id" [ngClass]="classes || 'form-label d-inline-block'">
+  <label [htmlFor]="prop.id" [class]="classes || 'form-label d-inline-block'">
     <span class="d-inline-flex align-items-center gap-1 text-nowrap">
       @if (prop.displayTextResolver) {
-        {{ prop.displayTextResolver(data) | abpLocalization }}
+      {{ prop.displayTextResolver(data) | abpLocalization }}
       } @else {
-        @if (prop.isExtra) {
-          {{ '::' + prop.displayName | abpLocalization }}
-        } @else {
-          {{ prop.displayName | abpLocalization }}
-        }
+      @if (prop.isExtra) {
+      {{ '::' + prop.displayName | abpLocalization }}
+      } @else {
+      {{ prop.displayName | abpLocalization }}
+      }
       }
       {{ asterisk }}
       @if (prop.tooltip) {
-        <i
-          [ngbTooltip]="prop.tooltip.text | abpLocalization"
-          [placement]="prop.tooltip.placement || 'auto'"
-          container="body"
-          class="bi bi-info-circle"
-        ></i>
+      <i [ngbTooltip]="prop.tooltip.text | abpLocalization" [placement]="prop.tooltip.placement || 'auto'"
+        container="body" class="bi bi-info-circle"></i>
       }
     </span>
   </label>
-</ng-template>
+</ng-template>
\ No newline at end of file
diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form.component.html b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form.component.html
index b88c2ecbfa..be937e21ca 100644
--- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form.component.html
+++ b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form.component.html
@@ -1,46 +1,35 @@
 @if (form) {
-  @for (groupedProp of groupedPropList.items; track i; let i = $index; let first = $first) {
-    <ng-container *abpPropData="let data; fromList: groupedProp.formPropList; withRecord: record">
-      @if (isAnyGroupMemberVisible(i, data) && groupedProp.group?.className) {
-        <div
-          [ngClass]="groupedProp.group?.className"
-          [attr.data-name]="groupedProp.group?.name || groupedProp.group?.className"
-        >
-          <ng-container
-            [ngTemplateOutlet]="propListTemplate"
-            [ngTemplateOutletContext]="{ groupedProp: groupedProp, data: data, isFirstGroup: first}"
-          >
-          </ng-container>
-        </div>
-      } @else {
-        <ng-container
-          [ngTemplateOutlet]="propListTemplate"
-          [ngTemplateOutletContext]="{ groupedProp: groupedProp, data: data, isFirstGroup: first }"
-        >
-        </ng-container>
-      }
+@for (groupedProp of groupedPropList.items; track i; let i = $index; let first = $first) {
+<ng-container *abpPropData="let data; fromList: groupedProp.formPropList; withRecord: record">
+  @if (isAnyGroupMemberVisible(i, data) && groupedProp.group?.className) {
+  <div [class]="groupedProp.group?.className"
+    [attr.data-name]="groupedProp.group?.name || groupedProp.group?.className">
+    <ng-container [ngTemplateOutlet]="propListTemplate"
+      [ngTemplateOutletContext]="{ groupedProp: groupedProp, data: data, isFirstGroup: first}">
     </ng-container>
+  </div>
+  } @else {
+  <ng-container [ngTemplateOutlet]="propListTemplate"
+    [ngTemplateOutletContext]="{ groupedProp: groupedProp, data: data, isFirstGroup: first }">
+  </ng-container>
   }
+</ng-container>
+}
 }
 
 <ng-template let-groupedProp="groupedProp" let-data="data" let-isFirstGroup="isFirstGroup" #propListTemplate>
   @for (prop of groupedProp.formPropList; let index = $index; let first = $first; track prop.name) {
-    @if (prop.visible(data)) {
-      @if (extraProperties.controls[prop.name]) {
-        <ng-container [formGroupName]="extraPropertiesKey">
-          <abp-extensible-form-prop [prop]="prop" [data]="data" [class]="prop.className" />
-        </ng-container>
-      } @else {
-        @if (form.get(prop.name)) {
-          <abp-extensible-form-prop
-            [class]="prop.className"
-            [prop]="prop"
-            [data]="data"
-            [first]="first"
-            [isFirstGroup]="isFirstGroup"
-          />
-        }
-      }
-    }
+  @if (prop.visible(data)) {
+  @if (extraProperties.controls[prop.name]) {
+  <ng-container [formGroupName]="extraPropertiesKey">
+    <abp-extensible-form-prop [prop]="prop" [data]="data" [class]="prop.className" />
+  </ng-container>
+  } @else {
+  @if (form.get(prop.name)) {
+  <abp-extensible-form-prop [class]="prop.className" [prop]="prop" [data]="data" [first]="first"
+    [isFirstGroup]="isFirstGroup" />
+  }
+  }
+  }
   }
-</ng-template>
+</ng-template>
\ No newline at end of file
diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form.component.ts b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form.component.ts
index 9d81502291..8b5829754d 100644
--- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form.component.ts
+++ b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form.component.ts
@@ -17,14 +17,14 @@ import { ExtensionsService } from '../../services/extensions.service';
 import { EXTENSIONS_IDENTIFIER } from '../../tokens/extensions.token';
 import { selfFactory } from '../../utils/factory.util';
 import { ExtensibleFormPropComponent } from './extensible-form-prop.component';
-import { NgClass, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import { PropDataDirective } from '../../directives/prop-data.directive';
 
 @Component({
   exportAs: 'abpExtensibleForm',
   selector: 'abp-extensible-form',
   templateUrl: './extensible-form.component.html',
-  imports: [NgClass, NgTemplateOutlet, PropDataDirective, ReactiveFormsModule, ExtensibleFormPropComponent],
+  imports: [NgTemplateOutlet, PropDataDirective, ReactiveFormsModule, ExtensibleFormPropComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
   viewProviders: [
     {
diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html
index 8581f6c4d4..43da43ab31 100644
--- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html
+++ b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html
@@ -1,21 +1,12 @@
 @if (isBrowser) {
-  <ngx-datatable
-  default
-  [rows]="data"
-  [count]="recordsTotal"
-  [list]="list"
-  [selectionType]="selectable ? _selectionType : undefined"
-  (activate)="tableActivate.emit($event)"
-  (select)="onSelect($event)"
-  [selected]="selected"
-  (scroll)="onScroll($event)"
-  [scrollbarV]="infiniteScroll"
-  [style.height]="getTableHeight()"
-  [loadingIndicator]="infiniteScroll && isLoading"
-  [footerHeight]="infiniteScroll ? false : 50"
->
-@if(selectable) {
-  <ngx-datatable-column [width]="50" [sortable]="false" [canAutoResize]="false" [draggable]="false" [resizeable]="false">
+<ngx-datatable default [rows]="data" [count]="recordsTotal" [list]="list"
+  [selectionType]="selectable ? _selectionType : undefined" (activate)="tableActivate.emit($event)"
+  (select)="onSelect($event)" [selected]="selected" (scroll)="onScroll($event)" [scrollbarV]="infiniteScroll"
+  [style.height]="getTableHeight()" [loadingIndicator]="infiniteScroll && isLoading"
+  [footerHeight]="infiniteScroll ? false : 50">
+  @if(selectable) {
+  <ngx-datatable-column [width]="50" [sortable]="false" [canAutoResize]="false" [draggable]="false"
+    [resizeable]="false">
 
     <ng-template ngx-datatable-header-template let-value="value" let-allRowsSelected="allRowsSelected"
       let-selectFn="selectFn">
@@ -44,97 +35,67 @@
   </ngx-datatable-column>
   }
   @if (actionsTemplate || (actionList.length && hasAtLeastOnePermittedAction)) {
-    <ngx-datatable-column
-      [name]="actionsText | abpLocalization"
-      [maxWidth]="_actionsColumnWidth() ?? undefined"
-      [width]="_actionsColumnWidth() ?? 200"
-      [canAutoResize]="!_actionsColumnWidth()"
-      [sortable]="false"
-    >
-      <ng-template let-row="row" let-i="rowIndex" ngx-datatable-cell-template>
-        <ng-container
-          *ngTemplateOutlet="actionsTemplate || gridActions; context: { $implicit: row, index: i }"
-        ></ng-container>
-        <ng-template #gridActions>
-          @if (isVisibleActions(row)) {
-            <abp-grid-actions [index]="i" [record]="row" text="AbpUi::Actions"></abp-grid-actions>
-          }
-        </ng-template>
+  <ngx-datatable-column [name]="actionsText | abpLocalization" [maxWidth]="_actionsColumnWidth() ?? undefined"
+    [width]="_actionsColumnWidth() ?? 200" [canAutoResize]="!_actionsColumnWidth()" [sortable]="false">
+    <ng-template let-row="row" let-i="rowIndex" ngx-datatable-cell-template>
+      <ng-container
+        *ngTemplateOutlet="actionsTemplate || gridActions; context: { $implicit: row, index: i }"></ng-container>
+      <ng-template #gridActions>
+        @if (isVisibleActions(row)) {
+        <abp-grid-actions [index]="i" [record]="row" text="AbpUi::Actions"></abp-grid-actions>
+        }
       </ng-template>
-    </ngx-datatable-column>
+    </ng-template>
+  </ngx-datatable-column>
   }
   @for (prop of propList; track prop.name; let i = $index) {
-    <ngx-datatable-column
-      *abpVisible="prop.columnVisible(getInjected)"
-      [width]="columnWidths[i] ?? 200"
-      [canAutoResize]="!columnWidths[i]"
-      [name]="(prop.isExtra ? '::' + prop.displayName : prop.displayName) | abpLocalization"
-      [prop]="prop.name"
-      [sortable]="prop.sortable"
-    >
-      <ng-template ngx-datatable-header-template let-column="column" let-sortFn="sortFn">
-        @if (prop.tooltip) {
-          <span
-            [ngbTooltip]="prop.tooltip.text | abpLocalization"
-            [placement]="prop.tooltip.placement || 'auto'"
-            container="body"
-            [class.pointer]="prop.sortable"
-            (click)="prop.sortable && sortFn(column)"
-          >
-            {{ column.name }} <i class="fa fa-info-circle" aria-hidden="true"></i>
-          </span>
-        } @else {
-          <span
-            [class.pointer]="prop.sortable"
-            (click)="prop.sortable && sortFn(column)"
-          >
-            {{ column.name }}
-          </span>
-        }
-      </ng-template>
-      <ng-template let-row="row" let-i="index" ngx-datatable-cell-template>
-        <ng-container *abpPermission="prop.permission; runChangeDetection: false">
-          <ng-container *abpVisible="row['_' + prop.name]?.visible">
-            @if (!row['_' + prop.name].component) {
-              @if (prop.type === 'datetime' || prop.type === 'date' || prop.type === 'time') {
-                <div
-                  [innerHTML]="
+  <ngx-datatable-column *abpVisible="prop.columnVisible(getInjected)" [width]="columnWidths[i] ?? 200"
+    [canAutoResize]="!columnWidths[i]"
+    [name]="(prop.isExtra ? '::' + prop.displayName : prop.displayName) | abpLocalization" [prop]="prop.name"
+    [sortable]="prop.sortable">
+    <ng-template ngx-datatable-header-template let-column="column" let-sortFn="sortFn">
+      @if (prop.tooltip) {
+      <span [ngbTooltip]="prop.tooltip.text | abpLocalization" [placement]="prop.tooltip.placement || 'auto'"
+        container="body" [class.pointer]="prop.sortable" (click)="prop.sortable && sortFn(column)">
+        {{ column.name }} <i class="fa fa-info-circle" aria-hidden="true"></i>
+      </span>
+      } @else {
+      <span [class.pointer]="prop.sortable" (click)="prop.sortable && sortFn(column)">
+        {{ column.name }}
+      </span>
+      }
+    </ng-template>
+    <ng-template let-row="row" let-i="index" ngx-datatable-cell-template>
+      <ng-container *abpPermission="prop.permission; runChangeDetection: false">
+        <ng-container *abpVisible="row['_' + prop.name]?.visible">
+          @if (!row['_' + prop.name].component) {
+          @if (prop.type === 'datetime' || prop.type === 'date' || prop.type === 'time') {
+          <div [innerHTML]="
                   !prop.isExtra
                     ? (row['_' + prop.name]?.value | async | abpUtcToLocal:prop.type)
                     : ('::' + (row['_' + prop.name]?.value | async | abpUtcToLocal:prop.type) | abpLocalization)
-                "
-                  (click)="
+                " (click)="
                   prop.action && prop.action({ getInjected: getInjected, record: row, index: i })
-                "
-                  [ngClass]="entityPropTypeClasses[prop.type]"
-                  [class.pointer]="prop.action"
-                ></div>
-              } @else {
-                <div
-                  [innerHTML]="
+                " [class]="entityPropTypeClasses[prop.type]" [class.pointer]="prop.action"></div>
+          } @else {
+          <div [innerHTML]="
                   !prop.isExtra
                     ? (row['_' + prop.name]?.value | async)
                     : ('::' + (row['_' + prop.name]?.value | async) | abpLocalization)
-                "
-                  (click)="
+                " (click)="
                   prop.action && prop.action({ getInjected: getInjected, record: row, index: i })
-                "
-                  [ngClass]="entityPropTypeClasses[prop.type]"
-                  [class.pointer]="prop.action"
-                ></div>
-              }
-            } @else {
-              <ng-container
-                *ngComponentOutlet="
+                " [class]="entityPropTypeClasses[prop.type]" [class.pointer]="prop.action"></div>
+          }
+          } @else {
+          <ng-container *ngComponentOutlet="
                   row['_' + prop.name].component;
                   injector: row['_' + prop.name].injector
-                "
-              ></ng-container>
-            }
-          </ng-container>
+                "></ng-container>
+          }
         </ng-container>
-      </ng-template>
-    </ngx-datatable-column>
+      </ng-container>
+    </ng-template>
+  </ngx-datatable-column>
   }
 </ngx-datatable>
-}
+}
\ No newline at end of file
diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/grid-actions/grid-actions.component.html b/npm/ng-packs/packages/components/extensible/src/lib/components/grid-actions/grid-actions.component.html
index 606a6de12a..57a8b4a7fe 100644
--- a/npm/ng-packs/packages/components/extensible/src/lib/components/grid-actions/grid-actions.component.html
+++ b/npm/ng-packs/packages/components/extensible/src/lib/components/grid-actions/grid-actions.component.html
@@ -1,88 +1,55 @@
 @if (actionList.length > 1) {
-  <div ngbDropdown container="body" class="d-inline-block">
-    <button
-      class="btn btn-primary btn-sm dropdown-toggle"
-      data-toggle="dropdown"
-      aria-haspopup="true"
-      ngbDropdownToggle
-    >
-      <i [ngClass]="icon" [class.me-1]="icon"></i>{{ text | abpLocalization }}
-    </button>
-    <div ngbDropdownMenu>
-      @for (action of actionList; track action.text) {
-        <ng-container
-          [ngTemplateOutlet]="dropDownBtnItemTmp"
-          [ngTemplateOutletContext]="{ $implicit: action }"
-        >
-        </ng-container>
-      }
-    </div>
+<div ngbDropdown container="body" class="d-inline-block">
+  <button class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" ngbDropdownToggle>
+    <i [class]="icon" [class.me-1]="icon"></i>{{ text | abpLocalization }}
+  </button>
+  <div ngbDropdownMenu>
+    @for (action of actionList; track action.text) {
+    <ng-container [ngTemplateOutlet]="dropDownBtnItemTmp" [ngTemplateOutletContext]="{ $implicit: action }">
+    </ng-container>
+    }
   </div>
+</div>
 }
 
 @if (actionList.length === 1) {
-  <ng-container
-    [ngTemplateOutlet]="btnTmp"
-    [ngTemplateOutletContext]="{ $implicit: actionList.get(0).value }"
-  ></ng-container>
+<ng-container [ngTemplateOutlet]="btnTmp"
+  [ngTemplateOutletContext]="{ $implicit: actionList.get(0).value }"></ng-container>
 }
 
 <ng-template #dropDownBtnItemTmp let-action>
   @if (action.visible(data)) {
-    <button
-      ngbDropdownItem
-      *abpPermission="action.permission; runChangeDetection: false"
-      (click)="action.action(data)"
-      type="button"
-    >
-      <ng-container
-        *ngTemplateOutlet="buttonContentTmp; context: { $implicit: action }"
-      ></ng-container>
-    </button>
+  <button ngbDropdownItem *abpPermission="action.permission; runChangeDetection: false" (click)="action.action(data)"
+    type="button">
+    <ng-container *ngTemplateOutlet="buttonContentTmp; context: { $implicit: action }"></ng-container>
+  </button>
   }
 </ng-template>
 
 <ng-template #buttonContentTmp let-action>
-  <i [ngClass]="action.icon" [class.me-1]="action.icon && !action.showOnlyIcon"></i>
+  <i [class]="action.icon" [class.me-1]="action.icon && !action.showOnlyIcon"></i>
   @if (!action.showOnlyIcon) {
-    @if (action.icon) {
-      <span>{{ action.text | abpLocalization }}</span>
-    } @else {
-      <div abpEllipsis>{{ action.text | abpLocalization }}</div>
-    }
+  @if (action.icon) {
+  <span>{{ action.text | abpLocalization }}</span>
+  } @else {
+  <div abpEllipsis>{{ action.text | abpLocalization }}</div>
+  }
   }
 </ng-template>
 
 <ng-template #btnTmp let-action>
   @if (action.visible(data)) {
-    @if (action.tooltip) {
-      <button
-        *abpPermission="action.permission; runChangeDetection: false"
-        (click)="action.action(data)"
-        type="button"
-        [class]="action.btnClass"
-        [style]="action.btnStyle"
-        [ngbTooltip]="action.tooltip.text | abpLocalization"
-        [placement]="action.tooltip.placement || 'auto'"
-        triggers="hover"
-        container="body"
-      >
-        <ng-container
-          *ngTemplateOutlet="buttonContentTmp; context: { $implicit: action }"
-        ></ng-container>
-      </button>
-    } @else {
-      <button
-        *abpPermission="action.permission; runChangeDetection: false"
-        (click)="action.action(data)"
-        type="button"
-        [class]="action.btnClass"
-        [style]="action.btnStyle"
-      >
-        <ng-container
-          *ngTemplateOutlet="buttonContentTmp; context: { $implicit: action }"
-        ></ng-container>
-      </button>
-    }
+  @if (action.tooltip) {
+  <button *abpPermission="action.permission; runChangeDetection: false" (click)="action.action(data)" type="button"
+    [class]="action.btnClass" [style]="action.btnStyle" [ngbTooltip]="action.tooltip.text | abpLocalization"
+    [placement]="action.tooltip.placement || 'auto'" triggers="hover" container="body">
+    <ng-container *ngTemplateOutlet="buttonContentTmp; context: { $implicit: action }"></ng-container>
+  </button>
+  } @else {
+  <button *abpPermission="action.permission; runChangeDetection: false" (click)="action.action(data)" type="button"
+    [class]="action.btnClass" [style]="action.btnStyle">
+    <ng-container *ngTemplateOutlet="buttonContentTmp; context: { $implicit: action }"></ng-container>
+  </button>
   }
-</ng-template>
+  }
+</ng-template>
\ No newline at end of file
diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/grid-actions/grid-actions.component.ts b/npm/ng-packs/packages/components/extensible/src/lib/components/grid-actions/grid-actions.component.ts
index 48bea482ca..9f7c28201e 100644
--- a/npm/ng-packs/packages/components/extensible/src/lib/components/grid-actions/grid-actions.component.ts
+++ b/npm/ng-packs/packages/components/extensible/src/lib/components/grid-actions/grid-actions.component.ts
@@ -1,8 +1,8 @@
-import { 
-  ChangeDetectionStrategy, 
-  Component, 
-  Input, 
-  TrackByFunction, 
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  TrackByFunction,
 } from '@angular/core';
 import { EntityAction, EntityActionList } from '../../models/entity-actions';
 import { EXTENSIONS_ACTION_TYPE } from '../../tokens/extensions.token';
@@ -10,7 +10,7 @@ import { AbstractActionsComponent } from '../abstract-actions/abstract-actions.c
 import { NgbDropdownModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import { LocalizationPipe, PermissionDirective } from '@abp/ng.core';
 import { EllipsisDirective } from '@abp/ng.theme.shared';
-import { NgClass, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 
 @Component({
   exportAs: 'abpGridActions',
@@ -18,7 +18,6 @@ import { NgClass, NgTemplateOutlet } from '@angular/common';
     NgbDropdownModule,
     EllipsisDirective,
     PermissionDirective,
-    NgClass,
     LocalizationPipe,
     NgTemplateOutlet,
     NgbTooltipModule,
diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/page-toolbar/page-toolbar.component.html b/npm/ng-packs/packages/components/extensible/src/lib/components/page-toolbar/page-toolbar.component.html
index c39bf59dd1..747ee8963a 100644
--- a/npm/ng-packs/packages/components/extensible/src/lib/components/page-toolbar/page-toolbar.component.html
+++ b/npm/ng-packs/packages/components/extensible/src/lib/components/page-toolbar/page-toolbar.component.html
@@ -4,26 +4,20 @@
     @if (action.visible(data)) {
     <ng-container *abpPermission="action.permission; runChangeDetection: false">
       @if (action.component; as component) {
-      <ng-container
-        *ngComponentOutlet="component; injector: record | createInjector: action:this"
-      ></ng-container>
+      <ng-container *ngComponentOutlet="component; injector: record | createInjector: action:this"></ng-container>
 
       }@else {
-         @if (asToolbarAction(action).value; as toolbarAction ) {
-          <button
-            (click)="action.action(data)"
-            type="button"
-            [ngClass]="toolbarAction?.btnClass ? toolbarAction?.btnClass : defaultBtnClass"
-            class="d-inline-flex align-items-center gap-1"
-          >
-            <i [ngClass]="toolbarAction?.icon" [class.me-1]="toolbarAction?.icon"></i>
-            {{ toolbarAction?.text | abpLocalization }}
-          </button>
-        } 
+      @if (asToolbarAction(action).value; as toolbarAction ) {
+      <button (click)="action.action(data)" type="button"
+        [class]="toolbarAction?.btnClass ? toolbarAction?.btnClass : defaultBtnClass"
+        class="d-inline-flex align-items-center gap-1">
+        <i [class]="toolbarAction?.icon" [class.me-1]="toolbarAction?.icon"></i>
+        {{ toolbarAction?.text | abpLocalization }}
+      </button>
+      }
       }
     </ng-container>
     }
   </div>
   }
-</div>
-
+</div>
\ No newline at end of file
diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/page-toolbar/page-toolbar.component.ts b/npm/ng-packs/packages/components/extensible/src/lib/components/page-toolbar/page-toolbar.component.ts
index 9dadb7497a..ada52513f3 100644
--- a/npm/ng-packs/packages/components/extensible/src/lib/components/page-toolbar/page-toolbar.component.ts
+++ b/npm/ng-packs/packages/components/extensible/src/lib/components/page-toolbar/page-toolbar.component.ts
@@ -10,7 +10,7 @@ import { EXTENSIONS_ACTION_TYPE } from '../../tokens/extensions.token';
 import { AbstractActionsComponent } from '../abstract-actions/abstract-actions.component';
 import { CreateInjectorPipe } from '../../pipes/create-injector.pipe';
 import { LocalizationPipe, PermissionDirective } from '@abp/ng.core';
-import { NgClass, NgComponentOutlet } from '@angular/common';
+import { NgComponentOutlet } from '@angular/common';
 
 @Component({
   exportAs: 'abpPageToolbar',
@@ -19,7 +19,6 @@ import { NgClass, NgComponentOutlet } from '@angular/common';
     CreateInjectorPipe,
     PermissionDirective,
     LocalizationPipe,
-    NgClass,
     NgComponentOutlet,
   ],
   templateUrl: './page-toolbar.component.html',
@@ -33,8 +32,7 @@ import { NgClass, NgComponentOutlet } from '@angular/common';
 })
 export class PageToolbarComponent<R = any>
   extends AbstractActionsComponent<ToolbarActionList<R>>
-  implements HasCreateInjectorPipe<R>
-{
+  implements HasCreateInjectorPipe<R> {
   readonly injector: Injector;
 
   defaultBtnClass = 'btn btn-sm btn-primary';
@@ -48,7 +46,7 @@ export class PageToolbarComponent<R = any>
     const injector = inject(Injector);
 
     super();
-  
+
     this.injector = injector;
   }
 
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.html b/npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.html
index 9f4fdd900d..afe6f11f48 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.html
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.html
@@ -1,16 +1,14 @@
 <ul class="navbar-nav">
   @for (route of routesService.visible$ | async; track $index) {
-    <ng-container
-      [ngTemplateOutlet]="isDropdown(route) ? dropdownLink : defaultLink"
-      [ngTemplateOutletContext]="{ $implicit: route }"
-    />
+  <ng-container [ngTemplateOutlet]="isDropdown(route) ? dropdownLink : defaultLink"
+    [ngTemplateOutletContext]="{ $implicit: route }" />
   }
 
   <ng-template #defaultLink let-route>
     <li class="nav-item" *abpPermission="route.requiredPolicy">
       <a class="nav-link" [routerLink]="[route.path]">
         @if (route.iconClass) {
-          <i [ngClass]="route.iconClass"></i>
+        <i [class]="route.iconClass"></i>
         }
         {{ route.name | abpLazyLocalization | async }}
       </a>
@@ -19,91 +17,62 @@
 
   <ng-template #dropdownLink let-route>
     @if (route.children?.length) {
-      <li
-        class="nav-item dropdown"
-        display="static"
-        *abpPermission="route.requiredPolicy"
-        (click)="
+    <li class="nav-item dropdown" display="static" *abpPermission="route.requiredPolicy" (click)="
           rootDropdownExpand[route.name]
             ? (rootDropdownExpand[route.name] = false)
             : (rootDropdownExpand[route.name] = true)
-        "
-      >
-        <a
-          class="nav-link dropdown-toggle"
-          data-toggle="dropdown"
-          aria-haspopup="true"
-          aria-expanded="false"
-          href="javascript:void(0)"
-        >
-          @if (route.iconClass) {
-            <i [ngClass]="route.iconClass"></i>
-          }
-          {{ route.name | abpLazyLocalization | async }}
-        </a>
-        <div
-          #routeContainer
-          class="dropdown-menu border-0 shadow-sm"
-          (click)="$event.preventDefault(); $event.stopPropagation()"
-          [class.d-block]="smallScreen && rootDropdownExpand[route.name]"
-        >
-          <ng-container *ngTemplateOutlet="forTemplate; context: { $implicit: route }" />
-        </div>
-      </li>
+        ">
+      <a class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
+        href="javascript:void(0)">
+        @if (route.iconClass) {
+        <i [class]="route.iconClass"></i>
+        }
+        {{ route.name | abpLazyLocalization | async }}
+      </a>
+      <div #routeContainer class="dropdown-menu border-0 shadow-sm"
+        (click)="$event.preventDefault(); $event.stopPropagation()"
+        [class.d-block]="smallScreen && rootDropdownExpand[route.name]">
+        <ng-container *ngTemplateOutlet="forTemplate; context: { $implicit: route }" />
+      </div>
+    </li>
     }
   </ng-template>
 
   <ng-template #forTemplate let-route>
     @for (child of route.children; track $index) {
-      <ng-template
-        [ngTemplateOutlet]="child.children?.length ? dropdownChild : defaultChild"
-        [ngTemplateOutletContext]="{ $implicit: child }"
-      />
+    <ng-template [ngTemplateOutlet]="child.children?.length ? dropdownChild : defaultChild"
+      [ngTemplateOutletContext]="{ $implicit: child }" />
     }
   </ng-template>
 
   <ng-template #defaultChild let-child>
     @if (child.path) {
-      <div class="dropdown-submenu" *abpPermission="child.requiredPolicy">
-        <a class="dropdown-item" [routerLink]="[child.path]" (click)="closeDropdown()">
-          @if (child.iconClass) {
-            <i [ngClass]="child.iconClass"></i>
-          }
-          {{ child.name | abpLocalization }}</a
-        >
-      </div>
+    <div class="dropdown-submenu" *abpPermission="child.requiredPolicy">
+      <a class="dropdown-item" [routerLink]="[child.path]" (click)="closeDropdown()">
+        @if (child.iconClass) {
+        <i [class]="child.iconClass"></i>
+        }
+        {{ child.name | abpLocalization }}</a>
+    </div>
     }
   </ng-template>
 
   <ng-template #dropdownChild let-child>
-    <div
-      class="dropdown-submenu"
-      ngbDropdown
-      #dropdownSubmenu="ngbDropdown"
-      placement="right-top"
-      [autoClose]="true"
-      *abpPermission="child.requiredPolicy"
-    >
+    <div class="dropdown-submenu" ngbDropdown #dropdownSubmenu="ngbDropdown" placement="right-top" [autoClose]="true"
+      *abpPermission="child.requiredPolicy">
       <div ngbDropdownToggle [class.dropdown-toggle]="false">
-        <a
-          abpEllipsis="210px"
-          [abpEllipsisEnabled]="!smallScreen"
-          role="button"
-          class="btn d-block text-start dropdown-toggle"
-        >
+        <a abpEllipsis="210px" [abpEllipsisEnabled]="!smallScreen" role="button"
+          class="btn d-block text-start dropdown-toggle">
           @if (child.iconClass) {
-            <i [ngClass]="child.iconClass"></i>
+          <i [class]="child.iconClass"></i>
           }
           {{ child.name | abpLocalization }}
         </a>
       </div>
-      <div
-        #childrenContainer
-        class="dropdown-menu dropdown-menu-start border-0 shadow-sm"
-        [class.d-block]="smallScreen && dropdownSubmenu.isOpen()"
-      >
+      <div #childrenContainer class="dropdown-menu dropdown-menu-start border-0 shadow-sm"
+        [class.d-block]="smallScreen && dropdownSubmenu.isOpen()">
         <ng-container *ngTemplateOutlet="forTemplate; context: { $implicit: child }" />
       </div>
     </div>
   </ng-template>
-</ul>
+</ul>
\ No newline at end of file
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.ts
index 5bc56ee765..374e6d9f4b 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.ts
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.ts
@@ -16,7 +16,7 @@ import {
   TrackByFunction,
   ViewChildren,
 } from '@angular/core';
-import { NgTemplateOutlet, NgClass, AsyncPipe } from '@angular/common';
+import { NgTemplateOutlet, AsyncPipe } from '@angular/common';
 import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 import { RouterLink } from '@angular/router';
 import { EllipsisDirective } from '@abp/ng.theme.shared';
@@ -26,7 +26,6 @@ import { EllipsisDirective } from '@abp/ng.theme.shared';
   templateUrl: 'routes.component.html',
   imports: [
     NgTemplateOutlet,
-    NgClass,
     AsyncPipe,
     RouterLink,
     NgbDropdownModule,
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/button/button.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/button/button.component.ts
index 81a2669491..47272992fd 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/button/button.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/button/button.component.ts
@@ -10,7 +10,6 @@ import {
   ViewChild,
   inject,
 } from '@angular/core';
-import { NgClass } from '@angular/common';
 import { ABP, StopPropagationDirective } from '@abp/ng.core';
 
 @Component({
@@ -21,16 +20,16 @@ import { ABP, StopPropagationDirective } from '@abp/ng.core';
       [id]="buttonId"
       [attr.type]="buttonType"
       [attr.form]="formName"
-      [ngClass]="buttonClass"
+      [class]="buttonClass"
       [disabled]="loading || disabled"
       (click.stop)="click.next($event); abpClick.next($event)"
       (focus)="focus.next($event); abpFocus.next($event)"
       (blur)="blur.next($event); abpBlur.next($event)"
     >
-      <i [ngClass]="icon" class="me-1" aria-hidden="true"></i><ng-content></ng-content>
+      <i [class]="icon" class="me-1" aria-hidden="true"></i><ng-content></ng-content>
     </button>
   `,
-  imports: [StopPropagationDirective, NgClass],
+  imports: [StopPropagationDirective],
 })
 export class ButtonComponent implements OnInit {
   private renderer = inject(Renderer2);
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-body.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-body.component.ts
index af94c0e1c9..6f8eade8d2 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-body.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-body.component.ts
@@ -1,12 +1,10 @@
 import { Component, HostBinding, Input } from '@angular/core';
-import { NgClass } from '@angular/common';
 
 @Component({
   selector: 'abp-card-body',
-  template: ` <div [ngClass]="cardBodyClass" [style]="cardBodyStyle">
+  template: ` <div [class]="cardBodyClass" [style]="cardBodyStyle">
     <ng-content></ng-content>
   </div>`,
-  imports: [NgClass],
 })
 export class CardBodyComponent {
   @HostBinding('class') componentClass = 'card-body';
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-footer.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-footer.component.ts
index 333b7577e4..3b96418fbd 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-footer.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-footer.component.ts
@@ -1,15 +1,14 @@
 import { Component, HostBinding, Input } from '@angular/core';
-import { NgClass } from '@angular/common';
 
 @Component({
   selector: 'abp-card-footer',
   template: `
-    <div [style]="cardFooterStyle" [ngClass]="cardFooterClass">
+    <div [style]="cardFooterStyle" [class]="cardFooterClass">
       <ng-content></ng-content>
     </div>
   `,
   styles: [],
-  imports: [NgClass],
+  imports: [],
 })
 export class CardFooterComponent {
   @HostBinding('class') componentClass = 'card-footer';
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-header.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-header.component.ts
index 9598c38ff5..3c31d16d74 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-header.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-header.component.ts
@@ -1,15 +1,14 @@
 import { Component, HostBinding, Input } from '@angular/core';
-import { NgClass } from '@angular/common';
 
 @Component({
   selector: 'abp-card-header',
   template: `
-    <div [ngClass]="cardHeaderClass" [style]="cardHeaderStyle">
+    <div [class]="cardHeaderClass" [style]="cardHeaderStyle">
       <ng-content></ng-content>
     </div>
   `,
   styles: [],
-  imports: [NgClass],
+  imports: [],
 })
 export class CardHeaderComponent {
   @HostBinding('class') componentClass = 'card-header';
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card.component.ts
index 1f941bcb7e..d65b8a12dc 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card.component.ts
@@ -1,12 +1,11 @@
 import { Component, Input } from '@angular/core';
-import { NgClass } from '@angular/common';
 
 @Component({
   selector: 'abp-card',
-  template: ` <div class="card" [ngClass]="cardClass" [style]="cardStyle">
+  template: ` <div class="card" [class]="cardClass" [style]="cardStyle">
     <ng-content></ng-content>
   </div>`,
-  imports: [NgClass],
+  imports: [],
 })
 export class CardComponent {
   @Input() cardClass: string;
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts
index 7be8551c2b..8da578f9a7 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts
@@ -1,6 +1,5 @@
 import { Component, EventEmitter, forwardRef, Input, Output } from '@angular/core';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
-import { NgClass } from '@angular/common';
 import { AbstractNgModelComponent, LocalizationPipe } from '@abp/ng.core';
 
 @Component({
@@ -12,13 +11,13 @@ import { AbstractNgModelComponent, LocalizationPipe } from '@abp/ng.core';
         [(ngModel)]="value"
         [id]="checkboxId"
         [readonly]="checkboxReadonly"
-        [ngClass]="checkboxClass"
+        [class]="checkboxClass"
         [style]="checkboxStyle"
         (blur)="checkboxBlur.next()"
         (focus)="checkboxFocus.next()"
       />
       @if (label) {
-        <label [ngClass]="labelClass" [for]="checkboxId">
+        <label [class]="labelClass" [for]="checkboxId">
           {{ label | abpLocalization }}
         </label>
       }
@@ -31,7 +30,7 @@ import { AbstractNgModelComponent, LocalizationPipe } from '@abp/ng.core';
       multi: true,
     },
   ],
-  imports: [NgClass, FormsModule, LocalizationPipe],
+  imports: [FormsModule, LocalizationPipe],
 })
 export class FormCheckboxComponent extends AbstractNgModelComponent {
   @Input() label?: string;
@@ -39,8 +38,8 @@ export class FormCheckboxComponent extends AbstractNgModelComponent {
   @Input() checkboxId!: string;
   @Input() checkboxStyle:
     | {
-        [klass: string]: any;
-      }
+      [klass: string]: any;
+    }
     | null
     | undefined;
   @Input() checkboxClass = 'form-check-input';
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.html
index ef3ce65819..c8b03dc177 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.html
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.html
@@ -1,51 +1,34 @@
 @if (confirmation$ | async; as data) {
-  <div class="confirmation">
-    <div
-      class="confirmation-backdrop"
-      (click)="data.options?.dismissible ? close(dismiss) : null"
-    ></div>
-    <div class="confirmation-dialog">
-      @if (data.severity || isCustomIconExists(data)) {
-        <div class="icon-container" [ngClass]="data.severity">
-          @if (isIconTemplateExits(data)) {
-            <div [outerHTML]="data.options.iconTemplate"></div>
-          } @else {
-            <i class="icon" [ngClass]="getIconClass(data)"></i>
-          }
-        </div>
+<div class="confirmation">
+  <div class="confirmation-backdrop" (click)="data.options?.dismissible ? close(dismiss) : null"></div>
+  <div class="confirmation-dialog">
+    @if (data.severity || isCustomIconExists(data)) {
+    <div class="icon-container" [class]="data.severity">
+      @if (isIconTemplateExits(data)) {
+      <div [outerHTML]="data.options.iconTemplate"></div>
+      } @else {
+      <i class="icon" [class]="getIconClass(data)"></i>
+      }
+    </div>
+    }
+    <div class="content">
+      @if (data.title) {
+      <h1 class="title" [innerHTML]="data.title | abpLocalization: data.options?.titleLocalizationParams"></h1>
+      }
+      @if (data.message) {
+      <p class="message" [innerHTML]="data.message | abpLocalization: data.options?.messageLocalizationParams"></p>
+      }
+    </div>
+    <div class="footer">
+      @if (!data?.options?.hideCancelBtn) {
+      <button id="cancel" class="btn btn-outline-primary me-2"
+        [innerHTML]="data.options?.cancelText || 'AbpUi::Cancel' | abpLocalization" (click)="close(reject)"></button>
+      }
+      @if (!data?.options?.hideYesBtn) {
+      <button id="confirm" class="btn btn-primary" [innerHTML]="data.options?.yesText || 'AbpUi::Yes' | abpLocalization"
+        (click)="close(confirm)"></button>
       }
-      <div class="content">
-        @if (data.title) {
-          <h1
-            class="title"
-            [innerHTML]="data.title | abpLocalization: data.options?.titleLocalizationParams"
-          ></h1>
-        }
-        @if (data.message) {
-          <p
-            class="message"
-            [innerHTML]="data.message | abpLocalization: data.options?.messageLocalizationParams"
-          ></p>
-        }
-      </div>
-      <div class="footer">
-        @if (!data?.options?.hideCancelBtn) {
-          <button
-            id="cancel"
-            class="btn btn-outline-primary me-2"
-            [innerHTML]="data.options?.cancelText || 'AbpUi::Cancel' | abpLocalization"
-            (click)="close(reject)"
-          ></button>
-        }
-        @if (!data?.options?.hideYesBtn) {
-          <button
-            id="confirm"
-            class="btn btn-primary"
-            [innerHTML]="data.options?.yesText || 'AbpUi::Yes' | abpLocalization"
-            (click)="close(confirm)"
-          ></button>
-        }
-      </div>
     </div>
   </div>
-}
+</div>
+}
\ No newline at end of file
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.ts
index 3ca2158c11..62be1b2af7 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.ts
@@ -1,4 +1,4 @@
-import { NgClass, AsyncPipe } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import { Component, inject } from '@angular/core';
 import { ReplaySubject } from 'rxjs';
 import { Confirmation } from '../../models/confirmation';
@@ -9,7 +9,7 @@ import { LocalizationPipe } from '@abp/ng.core';
   selector: 'abp-confirmation',
   templateUrl: './confirmation.component.html',
   styleUrls: ['./confirmation.component.scss'],
-  imports: [NgClass, AsyncPipe, LocalizationPipe],
+  imports: [AsyncPipe, LocalizationPipe],
 })
 export class ConfirmationComponent {
   private icons = inject<ConfirmationIcons>(CONFIRMATION_ICONS);
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.ts
index 401cf22250..9e1b843755 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.ts
@@ -1,6 +1,5 @@
 import { Component, EventEmitter, forwardRef, Input, Output } from '@angular/core';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { NgClass } from '@angular/common';
 import { AbstractNgModelComponent, LocalizationPipe } from '@abp/ng.core';
 
 @Component({
@@ -8,7 +7,7 @@ import { AbstractNgModelComponent, LocalizationPipe } from '@abp/ng.core';
   template: `
     <div class="mb-3">
       @if (label) {
-        <label [ngClass]="labelClass" [for]="inputId">
+        <label [class]="labelClass" [for]="inputId">
           {{ label | abpLocalization }}
         </label>
       }
@@ -17,7 +16,7 @@ import { AbstractNgModelComponent, LocalizationPipe } from '@abp/ng.core';
         [id]="inputId"
         [placeholder]="inputPlaceholder"
         [readonly]="inputReadonly"
-        [ngClass]="inputClass"
+        [class]="inputClass"
         [style]="inputStyle"
         (blur)="formBlur.next()"
         (focus)="formFocus.next()"
@@ -32,7 +31,7 @@ import { AbstractNgModelComponent, LocalizationPipe } from '@abp/ng.core';
       multi: true,
     },
   ],
-  imports: [NgClass, LocalizationPipe, FormsModule],
+  imports: [LocalizationPipe, FormsModule],
 })
 export class FormInputComponent extends AbstractNgModelComponent {
   @Input() inputId!: string;
@@ -42,8 +41,8 @@ export class FormInputComponent extends AbstractNgModelComponent {
   @Input() inputPlaceholder = '';
   @Input() inputStyle:
     | {
-        [klass: string]: any;
-      }
+      [klass: string]: any;
+    }
     | null
     | undefined;
   @Input() inputClass = 'form-control';
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts
index 81e2d6597f..28955596a5 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts
@@ -1,116 +1,117 @@
-import { NgClass }ngular/common';
-import { ChangeDetectorRef, Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
-import { combineLatest, Subscription, timer } from 'rxjs';
-import { HttpWaitService, RouterWaitService, SubscriptionService } from '@abp/ng.core';
-
-@Component({
-  selector: 'abp-loader-bar',
-  template: `
-    <di
-    <div id="abp-loader-bar" [ngClass]="containerClass" [class.is-loading]="isLoading">
-      <div
-        class="abp-progress"
-        [class.progressing]="progressLevel"
-        [style.width.vw]="progressLevel"
-        [style]="{
-          'background-color': color,
-          'box-shadow': boxShadow,
-        }"
-      ></div>
-    </div>
-  Urls: ['./loader-bar.component.scss'],
-  providers: [SubscriptionService],
-  imports: [NgClass],
[NgClass]LoaderBarComponent implements OnDestroy, OnInit {
-  private cdRef = inject(ChangeDetectorRef);
-  private subscription = inject(SubscriptionService);
-  private httpWaitService = inject(HttpWaitService);
-  private routerWaitService = inject(RouterWaitService);
-
-  protected _isLoading!: boolean;
-
-  @Input()
-  set isLoading(value: boolean) {
-    this._isLoading = value;
-    this.cdRef.detectChanges();
-  }
-  get isLoading(): boolean {
-    return this._isLoading;
-  }
-
-  @Input()
-  containerClass = 'abp-loader-bar';
-
-  @Input()
-  color = '#77b6ff';
-
-  progressLevel = 0;
-
-  interval = new Subscription();
-
-  timer = new Subscription();
-
-  intervalPeriod = 350;
-
-  stopDelay = 800;
-
-  private readonly clearProgress = () => {
-    this.progressLevel = 0;
-    this.cdRef.detectChanges();
-  };
-
-  private readonly reportProgress = () => {
-    if (this.progressLevel < 75) {
-      this.progressLevel += 1 + Math.random() * 9;
-    } else if (this.progressLevel < 90) {
-      this.progressLevel += 0.4;
-    } else if (this.progressLevel < 100) {
-      this.progressLevel += 0.1;
-    } else {
-      this.interval.unsubscribe();
-    }
-    this.cdRef.detectChanges();
-  };
-
-  get boxShadow(): string {
-    return `0 0 10px rgba(${this.color}, 0.5)`;
-  }
-
-  ngOnInit() {
-    this.subscribeLoading();
-  }
-
-  subscribeLoading() {
-    this.subscription.addOne(
-      combineLatest([this.httpWaitService.getLoading$(), this.routerWaitService.getLoading$()]),
-      ([httpLoading, routerLoading]) => {
-        if (httpLoading || routerLoading) this.startLoading();
-        else this.stopLoading();
-      },
-    );
-  }
-
-  ngOnDestroy() {
-    this.interval.unsubscribe();
-  }
-
-  startLoading() {
-    if (this.isLoading || !this.interval.closed) return;
-
-    this.isLoading = true;
-    this.progressLevel = 0;
-    this.cdRef.detectChanges();
-    this.interval = timer(0, this.intervalPeriod).subscribe(this.reportProgress);
-    this.timer.unsubscribe();
-  }
-
-  stopLoading() {
-    this.interval.unsubscribe();
-
-    this.progressLevel = 100;
-    this.isLoading = false;
-
-    if (!this.timer.closed) return;
-
-    this.timer = timer(this.stopDelay).subscribe(this.clearProgress);
-  }
-}
+import { ChangeDetectorRef, Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
+import { combineLatest, Subscription, timer } from 'rxjs';
+import { HttpWaitService, RouterWaitService, SubscriptionService } from '@abp/ng.core';
+
+@Component({
+  selector: 'abp-loader-bar',
+  template: `
+    <div id="abp-loader-bar" [class]="containerClass" [class.is-loading]="isLoading">
+      <div
+        class="abp-progress"
+        [class.progressing]="progressLevel"
+        [style.width.vw]="progressLevel"
+        [style]="{
+          'background-color': color,
+          'box-shadow': boxShadow,
+        }"
+      ></div>
+    </div>
+  `,
+  styleUrls: ['./loader-bar.component.scss'],
+  providers: [SubscriptionService],
+  imports: [],
+})
+export class LoaderBarComponent implements OnDestroy, OnInit {
+  private cdRef = inject(ChangeDetectorRef);
+  private subscription = inject(SubscriptionService);
+  private httpWaitService = inject(HttpWaitService);
+  private routerWaitService = inject(RouterWaitService);
+
+  protected _isLoading!: boolean;
+
+  @Input()
+  set isLoading(value: boolean) {
+    this._isLoading = value;
+    this.cdRef.detectChanges();
+  }
+  get isLoading(): boolean {
+    return this._isLoading;
+  }
+
+  @Input()
+  containerClass = 'abp-loader-bar';
+
+  @Input()
+  color = '#77b6ff';
+
+  progressLevel = 0;
+
+  interval = new Subscription();
+
+  timer = new Subscription();
+
+  intervalPeriod = 350;
+
+  stopDelay = 800;
+
+  private readonly clearProgress = () => {
+    this.progressLevel = 0;
+    this.cdRef.detectChanges();
+  };
+
+  private readonly reportProgress = () => {
+    if (this.progressLevel < 75) {
+      this.progressLevel += 1 + Math.random() * 9;
+    } else if (this.progressLevel < 90) {
+      this.progressLevel += 0.4;
+    } else if (this.progressLevel < 100) {
+      this.progressLevel += 0.1;
+    } else {
+      this.interval.unsubscribe();
+    }
+    this.cdRef.detectChanges();
+  };
+
+  get boxShadow(): string {
+    return `0 0 10px rgba(${this.color}, 0.5)`;
+  }
+
+  ngOnInit() {
+    this.subscribeLoading();
+  }
+
+  subscribeLoading() {
+    this.subscription.addOne(
+      combineLatest([this.httpWaitService.getLoading$(), this.routerWaitService.getLoading$()]),
+      ([httpLoading, routerLoading]) => {
+        if (httpLoading || routerLoading) this.startLoading();
+        else this.stopLoading();
+      },
+    );
+  }
+
+  ngOnDestroy() {
+    this.interval.unsubscribe();
+  }
+
+  startLoading() {
+    if (this.isLoading || !this.interval.closed) return;
+
+    this.isLoading = true;
+    this.progressLevel = 0;
+    this.cdRef.detectChanges();
+    this.interval = timer(0, this.intervalPeriod).subscribe(this.reportProgress);
+    this.timer.unsubscribe();
+  }
+
+  stopLoading() {
+    this.interval.unsubscribe();
+
+    this.progressLevel = 100;
+    this.isLoading = false;
+
+    if (!this.timer.closed) return;
+
+    this.timer = timer(this.stopDelay).subscribe(this.clearProgress);
+  }
+}
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.html
index 74e4f72a0a..ead9a95368 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.html
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.html
@@ -1,19 +1,17 @@
-<div class="abp-toast" [ngClass]="severityClass" (click)="tap()">
+<div class="abp-toast" [class]="severityClass" (click)="tap()">
   <div class="abp-toast-icon">
-    <i class="bi icon" [ngClass]="iconClass" aria-hidden="true"></i>
+    <i class="bi icon" [class]="iconClass" aria-hidden="true"></i>
   </div>
   <div class="abp-toast-content">
     @if (toast.options?.closable) {
-      <button class="abp-toast-close-button" (click)="close()">
-        <i class="bi bi-x fs-4" aria-hidden="true"></i>
-      </button>
+    <button class="abp-toast-close-button" (click)="close()">
+      <i class="bi bi-x fs-4" aria-hidden="true"></i>
+    </button>
     }
     <div class="abp-toast-title">
       {{ toast.title | abpLocalization: toast.options?.titleLocalizationParams }}
     </div>
-    <p
-      class="abp-toast-message"
-      [innerHTML]="toast.message | abpLocalization: toast.options?.messageLocalizationParams"
-    ></p>
+    <p class="abp-toast-message"
+      [innerHTML]="toast.message | abpLocalization: toast.options?.messageLocalizationParams"></p>
   </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.ts
index 7834a87c05..c3fb4d251e 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.ts
@@ -1,5 +1,4 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { NgClass } from '@angular/common';
 import { Toaster } from '../../models/toaster';
 import { LocalizationPipe } from '@abp/ng.core';
 
@@ -7,7 +6,7 @@ import { LocalizationPipe } from '@abp/ng.core';
   selector: 'abp-toast',
   templateUrl: './toast.component.html',
   styleUrls: ['./toast.component.scss'],
-  imports: [NgClass, LocalizationPipe],
+  imports: [LocalizationPipe],
 })
 export class ToastComponent implements OnInit {
   @Input()
diff --git a/templates/app-nolayers/angular/src/app/home/home.component.html b/templates/app-nolayers/angular/src/app/home/home.component.html
index 2bec5135ed..adae15fbb6 100644
--- a/templates/app-nolayers/angular/src/app/home/home.component.html
+++ b/templates/app-nolayers/angular/src/app/home/home.component.html
@@ -9,14 +9,12 @@
             Welcome to the application. This is a startup project based on the ABP framework. For
             more information visit abp.io.
           </p>
-          <a (click)="login()" class="px-4 btn btn-primary mb-4" role="button"
-            ><i class="fa fa-sign-in"></i> {{ 'AbpAccount::Login' | abpLocalization }}</a
-          >
+          <a (click)="login()" class="px-4 btn btn-primary mb-4" role="button"><i class="fa fa-sign-in"></i> {{
+            'AbpAccount::Login' | abpLocalization }}</a>
           }
 
           <h3>Getting Started</h3>
-          <ng-container
-            *ngTemplateOutlet="
+          <ng-container *ngTemplateOutlet="
               startingContentTemplate;
               context: {
                 $implicit: {
@@ -26,12 +24,10 @@
                   label: 'Getting Started'
                 }
               }
-            "
-          ></ng-container>
+            "></ng-container>
 
           <h4>Web Application Development Tutorial</h4>
-          <ng-container
-            *ngTemplateOutlet="
+          <ng-container *ngTemplateOutlet="
               startingContentTemplate;
               context: {
                 $implicit: {
@@ -41,17 +37,12 @@
                   label: 'Explore Tutorial'
                 }
               }
-            "
-          ></ng-container>
+            "></ng-container>
 
           <h4>Customize Lepton Theme</h4>
           <p class="text-muted mb-2">Learn how to customize LeptonX Theme as you wish.</p>
-          <a
-            href="https://docs.abp.io/en/abp/latest/UI/Angular/Theming"
-            class="btn btn-primary soft mb-5 mb-xl-0"
-            target="_blank"
-            >Customize Lepton</a
-          >
+          <a href="https://docs.abp.io/en/abp/latest/UI/Angular/Theming" class="btn btn-primary soft mb-5 mb-xl-0"
+            target="_blank">Customize Lepton</a>
         </div>
 
         <img class="card-bg-image" src="assets/images/getting-started/bg-01.png" />
@@ -60,8 +51,7 @@
   </div>
   <div class="col-xl-3 col-md-6 d-flex">
     <div class="row">
-      <ng-container
-        *ngTemplateOutlet="
+      <ng-container *ngTemplateOutlet="
           visitLinkTemplate;
           context: {
             $implicit: {
@@ -75,10 +65,8 @@
               logo: 'abp-support abp-logo mb-2'
             }
           }
-        "
-      ></ng-container>
-      <ng-container
-        *ngTemplateOutlet="
+        "></ng-container>
+      <ng-container *ngTemplateOutlet="
           visitLinkTemplate;
           context: {
             $implicit: {
@@ -92,8 +80,7 @@
               logo: 'abp-blog abp-logo mb-2'
             }
           }
-        "
-      ></ng-container>
+        "></ng-container>
     </div>
   </div>
   <div class="col-xl-3 col-md-6 d-flex">
@@ -108,17 +95,14 @@
           Explore all ABP users' experiences with the ABP Framework, discover articles and videos on
           how to use ABP, and join raffles for a chance to win surprise gifts!
         </p>
-        <a class="btn btn-brand soft mb-3" href="https://community.abp.io/" target="_blank"
-          >Join ABP Community</a
-        >
+        <a class="btn btn-brand soft mb-3" href="https://community.abp.io/" target="_blank">Join ABP Community</a>
       </div>
       <img class="mt-3" src="assets/images/getting-started/img-community.png" />
     </div>
   </div>
 </div>
 <div class="row">
-  <ng-container
-    *ngTemplateOutlet="
+  <ng-container *ngTemplateOutlet="
       tableTemplate;
       context: {
         $implicit: {
@@ -167,8 +151,7 @@
           ]
         }
       }
-    "
-  ></ng-container>
+    "></ng-container>
   <div class="col-xl-6 col-lg-8 d-flex">
     <div class="card">
       <div class="card-body d-flex">
@@ -181,18 +164,12 @@
               understanding of the framework and modern web application development techniques.
             </p>
             <div class="d-md-flex mb-2 mb-md-0">
-              <a
-                href="https://www.amazon.com/gp/product/B097Z2DM8Q"
-                target="_blank"
-                class="btn btn-primary soft me-md-2 mb-2 mb-md-0"
-              >
+              <a href="https://www.amazon.com/gp/product/B097Z2DM8Q" target="_blank"
+                class="btn btn-primary soft me-md-2 mb-2 mb-md-0">
                 Buy on Amazon US
               </a>
-              <a
-                href="https://www.packtpub.com/product/mastering-abp-framework/9781801079242"
-                target="_blank"
-                class="btn btn-primary soft mb-2 mb-md-0"
-              >
+              <a href="https://www.packtpub.com/product/mastering-abp-framework/9781801079242" target="_blank"
+                class="btn btn-primary soft mb-2 mb-md-0">
                 Buy on PACKT
               </a>
             </div>
@@ -204,8 +181,7 @@
       </div>
     </div>
   </div>
-  <ng-container
-    *ngTemplateOutlet="
+  <ng-container *ngTemplateOutlet="
       tableTemplate;
       context: {
         $implicit: {
@@ -243,8 +219,7 @@
           ]
         }
       }
-    "
-  ></ng-container>
+    "></ng-container>
 </div>
 
 <ng-template #startingContentTemplate let-context>
@@ -279,10 +254,7 @@
               <tr>
                 <td class="ps-0 d-flex" [class.border-bottom-0]="last">
                   @if(item.icon){
-                  <div
-                    [ngClass]="item.iconClass"
-                    [style]="item.style ? 'width: 20px; height: 20px' : ''"
-                  >
+                  <div [class]="item.iconClass" [style]="item.style ? 'width: 20px; height: 20px' : ''">
                     @if(item.iconType === 'image'){
                     <img [src]="item.icon" class="me-2" />
                     }@else if(item.iconType === 'icon'){
@@ -307,4 +279,4 @@
       </div>
     </div>
   </div>
-</ng-template>
+</ng-template>
\ No newline at end of file
diff --git a/templates/app/angular/src/app/home/home.component.html b/templates/app/angular/src/app/home/home.component.html
index e3e73e48ae..e3ffd708c1 100644
--- a/templates/app/angular/src/app/home/home.component.html
+++ b/templates/app/angular/src/app/home/home.component.html
@@ -8,14 +8,12 @@
           <p class="lead text-muted mb-2">
             {{ '::LongWelcomeMessage' | abpLocalization }}
           </p>
-          <a (click)="login()" class="px-4 btn btn-primary mb-4" role="button"
-            ><i class="fa fa-sign-in"></i> {{ 'AbpAccount::Login' | abpLocalization }}</a
-          >
+          <a (click)="login()" class="px-4 btn btn-primary mb-4" role="button"><i class="fa fa-sign-in"></i> {{
+            'AbpAccount::Login' | abpLocalization }}</a>
           }
 
           <h3>Getting Started</h3>
-          <ng-container
-            *ngTemplateOutlet="
+          <ng-container *ngTemplateOutlet="
               startingContentTemplate;
               context: {
                 $implicit: {
@@ -25,12 +23,10 @@
                   label: 'Getting Started'
                 }
               }
-            "
-          ></ng-container>
+            "></ng-container>
 
           <h4>Web Application Development Tutorial</h4>
-          <ng-container
-            *ngTemplateOutlet="
+          <ng-container *ngTemplateOutlet="
               startingContentTemplate;
               context: {
                 $implicit: {
@@ -40,17 +36,12 @@
                   label: 'Explore Tutorial'
                 }
               }
-            "
-          ></ng-container>
+            "></ng-container>
 
           <h4>Customize Lepton Theme</h4>
           <p class="text-muted mb-2">Learn how to customize LeptonX Theme as you wish.</p>
-          <a
-            href="https://abp.io/docs/latest/framework/ui/angular/theming"
-            class="btn btn-primary soft mb-5 mb-xl-0"
-            target="_blank"
-            >Customize Lepton</a
-          >
+          <a href="https://abp.io/docs/latest/framework/ui/angular/theming" class="btn btn-primary soft mb-5 mb-xl-0"
+            target="_blank">Customize Lepton</a>
         </div>
 
         <img class="card-bg-image" src="assets/images/getting-started/bg-01.png" />
@@ -59,8 +50,7 @@
   </div>
   <div class="col-xl-3 col-md-6 d-flex">
     <div class="row">
-      <ng-container
-        *ngTemplateOutlet="
+      <ng-container *ngTemplateOutlet="
           visitLinkTemplate;
           context: {
             $implicit: {
@@ -74,10 +64,8 @@
               logo: 'abp-support abp-logo mb-2'
             }
           }
-        "
-      ></ng-container>
-      <ng-container
-        *ngTemplateOutlet="
+        "></ng-container>
+      <ng-container *ngTemplateOutlet="
           visitLinkTemplate;
           context: {
             $implicit: {
@@ -91,8 +79,7 @@
               logo: 'abp-blog abp-logo mb-2'
             }
           }
-        "
-      ></ng-container>
+        "></ng-container>
     </div>
   </div>
   <div class="col-xl-3 col-md-6 d-flex">
@@ -107,17 +94,14 @@
           Explore all ABP users' experiences with the ABP Framework, discover articles and videos on
           how to use ABP, and join raffles for a chance to win surprise gifts!
         </p>
-        <a class="btn btn-brand soft mb-3" href="https://abp.io/community/" target="_blank"
-          >Join ABP Community</a
-        >
+        <a class="btn btn-brand soft mb-3" href="https://abp.io/community/" target="_blank">Join ABP Community</a>
       </div>
       <img class="mt-3" src="assets/images/getting-started/img-community.png" />
     </div>
   </div>
 </div>
 <div class="row">
-  <ng-container
-    *ngTemplateOutlet="
+  <ng-container *ngTemplateOutlet="
       tableTemplate;
       context: {
         $implicit: {
@@ -166,8 +150,7 @@
           ]
         }
       }
-    "
-  ></ng-container>
+    "></ng-container>
   <div class="col-xl-6 col-lg-8 d-flex">
     <div class="card">
       <div class="card-body d-flex">
@@ -180,18 +163,12 @@
               understanding of the framework and modern web application development techniques.
             </p>
             <div class="d-md-flex mb-2 mb-md-0">
-              <a
-                href="https://www.amazon.com/gp/product/B097Z2DM8Q"
-                target="_blank"
-                class="btn btn-primary soft me-md-2 mb-2 mb-md-0"
-              >
+              <a href="https://www.amazon.com/gp/product/B097Z2DM8Q" target="_blank"
+                class="btn btn-primary soft me-md-2 mb-2 mb-md-0">
                 Buy on Amazon US
               </a>
-              <a
-                href="https://www.packtpub.com/product/mastering-abp-framework/9781801079242"
-                target="_blank"
-                class="btn btn-primary soft mb-2 mb-md-0"
-              >
+              <a href="https://www.packtpub.com/product/mastering-abp-framework/9781801079242" target="_blank"
+                class="btn btn-primary soft mb-2 mb-md-0">
                 Buy on PACKT
               </a>
             </div>
@@ -203,8 +180,7 @@
       </div>
     </div>
   </div>
-  <ng-container
-    *ngTemplateOutlet="
+  <ng-container *ngTemplateOutlet="
       tableTemplate;
       context: {
         $implicit: {
@@ -242,8 +218,7 @@
           ]
         }
       }
-    "
-  ></ng-container>
+    "></ng-container>
 </div>
 
 <ng-template #startingContentTemplate let-context>
@@ -278,10 +253,7 @@
               <tr>
                 <td class="ps-0 d-flex" [class.border-bottom-0]="last">
                   @if(item.icon){
-                  <div
-                    [ngClass]="item.iconClass"
-                    [style]="item.style ? 'width: 20px; height: 20px' : ''"
-                  >
+                  <div [class]="item.iconClass" [style]="item.style ? 'width: 20px; height: 20px' : ''">
                     @if(item.iconType === 'image'){
                     <img [src]="item.icon" class="me-2" />
                     }@else if(item.iconType === 'icon'){
@@ -306,4 +278,4 @@
       </div>
     </div>
   </div>
-</ng-template>
+</ng-template>
\ No newline at end of file

From 89f873b060ea469898f993b4e53b442aedaf1bf6 Mon Sep 17 00:00:00 2001
From: Fahri Gedik <53567152+fahrigedik@users.noreply.github.com>
Date: Thu, 15 Jan 2026 13:01:31 +0300
Subject: [PATCH 5/5] Refactor profile and alert components for cleaner
 templates

Simplified the HTML structure of manage-profile and page-alert-container components by reducing unnecessary markup and improving readability. Replaced Angular animation usage in manage-profile with a CSS-based fade-in effect for better maintainability.
---
 .../manage-profile.component.html             | 78 ++++++++-----------
 .../manage-profile.component.ts               | 20 +++--
 .../page-alert-container.component.html       | 36 +++------
 3 files changed, 58 insertions(+), 76 deletions(-)

diff --git a/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.html b/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.html
index ba58de211b..91167b0ede 100644
--- a/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.html
+++ b/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.html
@@ -5,61 +5,47 @@
       <div class="col-12 col-md-3">
         <ul class="nav flex-column nav-pills" id="nav-tab" role="tablist">
           @if (!hideChangePasswordTab && (profile$ | async)) {
-            <li class="nav-item" (click)="selectedTab = 0">
-              <a
-                class="nav-link"
-                [class.active]="selectedTab === 0"
-                role="tab"
-                href="javascript:void(0)"
-                >{{ 'AbpUi::ChangePassword' | abpLocalization }}</a
-              >
-            </li>
+          <li class="nav-item" (click)="selectedTab = 0">
+            <a class="nav-link" [class.active]="selectedTab === 0" role="tab" href="javascript:void(0)">{{
+              'AbpUi::ChangePassword' | abpLocalization }}</a>
+          </li>
           }
           <li class="nav-item mb-2" (click)="selectedTab = 1">
-            <a
-              class="nav-link"
-              [class.active]="selectedTab === 1"
-              role="tab"
-              href="javascript:void(0)"
-              >{{ 'AbpAccount::PersonalSettings' | abpLocalization }}</a
-            >
+            <a class="nav-link" [class.active]="selectedTab === 1" role="tab" href="javascript:void(0)">{{
+              'AbpAccount::PersonalSettings' | abpLocalization }}</a>
           </li>
         </ul>
       </div>
       @if (profile$ | async) {
-        <div class="col-12 col-md-9">
-          @if (selectedTab === 0) {
-            <div class="tab-content" [@fadeIn]>
-              <div class="tab-pane active" role="tabpanel">
-                <h4>
-                  {{ 'AbpIdentity::ChangePassword' | abpLocalization }}
-                  <hr />
-                </h4>
-                <abp-change-password-form
-                  *abpReplaceableTemplate="{
+      <div class="col-12 col-md-9">
+        @if (selectedTab === 0) {
+        <div class="tab-content fade-in">
+          <div class="tab-pane active" role="tabpanel">
+            <h4>
+              {{ 'AbpIdentity::ChangePassword' | abpLocalization }}
+              <hr />
+            </h4>
+            <abp-change-password-form *abpReplaceableTemplate="{
                     componentKey: changePasswordKey
-                  }"
-                ></abp-change-password-form>
-              </div>
-            </div>
-          }
-          @if (selectedTab === 1) {
-            <div class="tab-content" [@fadeIn]>
-              <div class="tab-pane active" role="tabpanel">
-                <h4>
-                  {{ 'AbpIdentity::PersonalSettings' | abpLocalization }}
-                  <hr />
-                </h4>
-                <abp-personal-settings-form
-                  *abpReplaceableTemplate="{
+                  }"></abp-change-password-form>
+          </div>
+        </div>
+        }
+        @if (selectedTab === 1) {
+        <div class="tab-content fade-in">
+          <div class="tab-pane active" role="tabpanel">
+            <h4>
+              {{ 'AbpIdentity::PersonalSettings' | abpLocalization }}
+              <hr />
+            </h4>
+            <abp-personal-settings-form *abpReplaceableTemplate="{
                     componentKey: personalSettingsKey
-                  }"
-                ></abp-personal-settings-form>
-              </div>
-            </div>
-          }
+                  }"></abp-personal-settings-form>
+          </div>
         </div>
+        }
+      </div>
       }
     </div>
   </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.ts b/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.ts
index 368818090d..5be91d34f7 100644
--- a/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.ts
+++ b/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.ts
@@ -1,6 +1,5 @@
 import { ProfileService } from '@abp/ng.account.core/proxy';
-import { fadeIn, LoadingDirective } from '@abp/ng.theme.shared';
-import { transition, trigger, useAnimation } from '@angular/animations';
+import { LoadingDirective } from '@abp/ng.theme.shared';
 import { Component, inject, OnInit } from '@angular/core';
 import { eAccountComponents } from '../../enums/components';
 import { ManageProfileStateService } from '../../services/manage-profile.state.service';
@@ -13,13 +12,24 @@ import { ChangePasswordComponent } from '../change-password/change-password.comp
 @Component({
   selector: 'abp-manage-profile',
   templateUrl: './manage-profile.component.html',
-  animations: [trigger('fadeIn', [transition(':enter', useAnimation(fadeIn))])],
   styles: [
-    //TODO: move static styles
     `
       .min-h-400 {
         min-height: 400px;
       }
+
+      .fade-in {
+        animation: fadeIn 350ms ease both;
+      }
+
+      @keyframes fadeIn {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
     `,
   ],
   imports: [
@@ -30,7 +40,7 @@ import { ChangePasswordComponent } from '../change-password/change-password.comp
     LocalizationPipe,
     ReplaceableTemplateDirective,
     LoadingDirective
-],
+  ],
 })
 export class ManageProfileComponent implements OnInit {
   protected profileService = inject(ProfileService);
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/page-alert-container/page-alert-container.component.html b/npm/ng-packs/packages/theme-basic/src/lib/components/page-alert-container/page-alert-container.component.html
index a2bd76ebd8..daaa6c48ec 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/page-alert-container/page-alert-container.component.html
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/page-alert-container/page-alert-container.component.html
@@ -1,26 +1,12 @@
 @for (alert of service.alerts$ | async; track i; let i = $index) {
-  <div
-    class="alert alert-{{ alert.type }} fade show"
-    [class.alert-dismissible]="alert.dismissible" [class.fade]="alert.dismissible" [class.show]="alert.dismissible"
-    role="alert"
-  >
-    @if (alert.title) {
-      <h4
-        class="alert-heading"
-        [innerHTML]="alert.title | abpSafeHtml | abpLocalization: alert.titleLocalizationParams"
-      ></h4>
-    }
-    <span
-      [innerHTML]="alert.message | abpSafeHtml | abpLocalization: alert.messageLocalizationParams"
-    ></span>
-    @if (alert.dismissible) {
-      <button
-        type="button"
-        class="btn-close"
-        data-dismiss="alert"
-        aria-label="Close"
-        (click)="service.remove(i)"
-      ></button>
-    }
-  </div>
-}
+<div class="alert alert-{{ alert.type }} fade show" [class.alert-dismissible]="alert.dismissible" role="alert">
+  @if (alert.title) {
+  <h4 class="alert-heading" [innerHTML]="alert.title | abpSafeHtml | abpLocalization: alert.titleLocalizationParams">
+  </h4>
+  }
+  <span [innerHTML]="alert.message | abpSafeHtml | abpLocalization: alert.messageLocalizationParams"></span>
+  @if (alert.dismissible) {
+  <button type="button" class="btn-close" data-dismiss="alert" aria-label="Close" (click)="service.remove(i)"></button>
+  }
+</div>
+}
\ No newline at end of file