Angular - Applying the latest migrations - Issue 24564

[fahrigedik]

Description

Resolves #24564 (write the related issue number if available)

• Migration from NgClass to class bindings
• Migration from NgStyle to style bindings
• RouterTestingModule migration
• Convert CommonModule usage to standalone imports

[sumeyyeKurtulus]

We should keep fade and show always present, only conditionally add alert-dismissible like this:

<div
  class="alert alert-{{ alert.type }} fade show"
  [class.alert-dismissible]="alert.dismissible"
  role="alert"
 >

[sumeyyeKurtulus]

Hello @fahrigedik thank you for this migration. Here are some points that we can consider:

• We can also update this animation deprecation here npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.ts We can declare such styles

  .fade-in {
    animation: fadeIn 350ms ease both;
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  and replace the [@fadeIn] usage with animate.enter="fade-in" usage instead.

• We should also consider a formatting rule such as prettier formatting to use in an IDE. Because, some changes get larger because of an auto-formatting mismatch. I guess we can discuss it together when you check this @fahrigedik @erdemcaygor

[Copilot]

Pull request overview

This pull request applies the latest Angular migrations to modernize the codebase, focusing on migrating away from deprecated or legacy Angular patterns to modern alternatives.

Changes:

• Migrated from NgClass directive to native [class] bindings throughout all components and templates
• Migrated from NgStyle directive to native [style] bindings throughout all components and templates
• Converted CommonModule imports to specific standalone imports (e.g., AsyncPipe, NgTemplateOutlet)
• Replaced Angular animation with CSS animation in manage-profile component

Reviewed changes

Copilot reviewed 37 out of 37 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
templates/app/angular/src/app/home/home.component.html	Migrated NgClass to [class] bindings and reformatted template for consistency
templates/app-nolayers/angular/src/app/home/home.component.html	Migrated NgClass to [class] bindings and reformatted template for consistency
npm/ng-packs/packages/theme-shared/src/lib/components/toast/.ts/.html	Removed NgClass imports and migrated to [class] bindings
npm/ng-packs/packages/theme-shared/src/lib/components/password/.ts/.html	Removed NgClass imports and migrated to [class] bindings
npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/*.ts	Removed NgClass and NgStyle imports, migrated to [class] and [style] bindings
npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/*.ts	Removed CommonModule import, kept only necessary standalone imports
npm/ng-packs/packages/theme-shared/src/lib/components/form-input/*.ts	Removed NgClass and NgStyle imports, migrated to [class] and [style] bindings
npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/.ts/.html	Removed NgClass imports and migrated to [class] bindings
npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/*.ts	Removed NgClass and NgStyle imports, migrated to [class] and [style] bindings
npm/ng-packs/packages/theme-shared/src/lib/components/card/*.ts	Removed NgClass and NgStyle imports from all card-related components
npm/ng-packs/packages/theme-shared/src/lib/components/button/*.ts	Removed CommonModule import, migrated to [class] bindings
npm/ng-packs/packages/theme-basic/src/lib/components/routes/.ts/.html	Removed NgClass imports and migrated to [class] bindings
npm/ng-packs/packages/theme-basic/src/lib/components/page-alert-container/.ts/.html	Removed NgClass imports and migrated to [class] bindings with potential behavioral change
npm/ng-packs/packages/setting-management/config/src/lib/components/email-setting-group/*.ts	Removed CommonModule import
npm/ng-packs/packages/permission-management/src/lib/components/.ts/.html	Removed NgStyle imports and migrated to [style] bindings
npm/ng-packs/packages/feature-management/src/lib/components/feature-management/*.html	Migrated NgStyle to [style] bindings and reformatted template
npm/ng-packs/packages/components/lookup/src/lib/*.ts	Replaced CommonModule with NgTemplateOutlet import
npm/ng-packs/packages/components/extensible/src/lib/components/page-toolbar/.ts/.html	Removed NgClass imports and migrated to [class] bindings
npm/ng-packs/packages/components/extensible/src/lib/components/grid-actions/.ts/.html	Removed NgClass imports and migrated to [class] bindings
npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/*.html	Migrated NgClass to [class] bindings
npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/.ts/.html	Removed NgClass imports and migrated to [class] bindings
npm/ng-packs/packages/account/src/lib/components/manage-profile/.ts/.html	Replaced Angular animation with CSS animation, removed NgClass import

[Copilot]

The trailing comma is missing after the last element in the imports array. This is inconsistent with TypeScript style conventions used elsewhere in the codebase where trailing commas are present after the last array element.

Suggested change

	PermissionDirective
	],
	PermissionDirective,
	],

[Copilot]

The trailing comma is missing after the last element in the imports array. This is inconsistent with TypeScript style conventions used elsewhere in the codebase where trailing commas are present after the last array element.

Suggested change

	ModalCloseDirective
	],
	ModalCloseDirective,
	],

[Copilot]

The trailing comma is missing after the last element in the imports array. This is inconsistent with TypeScript style conventions used elsewhere in the codebase where trailing commas are present after the last array element.

Suggested change

	LoadingDirective
	LoadingDirective,

[Copilot]

The migration from ngClass changes the behavior. The original code applied "fade show" classes conditionally only when alert.dismissible is true. The new code always applies "fade show" classes and only conditionally applies "alert-dismissible". This change in behavior may be intentional as part of the Angular migration, but it should be verified that alerts should always fade in/show regardless of dismissibility.

Suggested change

	<div class="alert alert-{{ alert.type }} fade show" [class.alert-dismissible]="alert.dismissible" role="alert">
	<div class="alert alert-{{ alert.type }}" [class.fade]="alert.dismissible" [class.show]="alert.dismissible" [class.alert-dismissible]="alert.dismissible" role="alert">