Merge pull request #24579 from abpframework/issue-24564

Angular - Applying the latest migrations - Issue 24564

Author: fahrigedik

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"
-                [ngClass]="{ 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"
-              [ngClass]="{ 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>

npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.ts

@@ -1,10 +1,9 @@
 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';
-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';
@@ -13,24 +12,34 @@ 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: [
-    NgClass,
     AsyncPipe,
     ReactiveFormsModule,
     PersonalSettingsComponent,
     ChangePasswordComponent,
     LocalizationPipe,
     ReplaceableTemplateDirective,
-    LoadingDirective,
+    LoadingDirective
   ],
 })
 export class ManageProfileComponent implements OnInit {