* abp-loading-directive added to button with other styles.

npm/ng-packs/apps/dev-app/src/app/home/home.component.html

@@ -12,19 +12,14 @@
 
     <button
       *ngIf="!hasLoggedIn"
-      [disabled]="isLog"
       (click)="login()"
+      [disabled]="isLog"
       class="px-4 btn btn-primary ml-1"
       role="button"
     >
-      <i class="fa fa-sign-in"></i> {{ 'AbpAccount::Login' | abpLocalization }}
-      <div
-        *ngIf="isLog"
-        style="width: 17px; height: 17px"
-        class="spinner-border text-light ms-2"
-        role="status"
-      >
-        <span class="visually-hidden">Loading...</span>
+      <div class="d-flex">
+        <div><i class="fa fa-sign-in"></i> {{ 'AbpAccount::Login' | abpLocalization }}</div>
+        <div [abpLoading]="isLog" class="" style="margin-bottom: 13px; margin-left: 7px"></div>
       </div>
     </button>
   </div>

npm/ng-packs/apps/dev-app/src/app/home/home.component.ts

@@ -1,24 +1,32 @@
 import { AuthService } from '@abp/ng.core';
 import { Component } from '@angular/core';
-import { OAuthService } from 'angular-oauth2-oidc';
-import { timeInterval } from 'rxjs';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
 })
 export class HomeComponent {
+  //for disabled button and abp loading spinner
   isLog: boolean = false;
   get hasLoggedIn(): boolean {
     return this.authService.isAuthenticated;
   }
 
-  constructor(private authService: AuthService) {}
+  constructor(private authService: AuthService, private router: Router) {
+    // this.router.events.subscribe(event => {
+    //   if (event instanceof NavigationStart) {
+    //     console.log(event);
+    //   }
+    // });
+  }
 
   login() {
+    //when clicked button spinner and disabled will be active
     this.isLog = true;
-    setTimeout(data => {
+    setTimeout(a => {
       this.authService.navigateToLogin();
+      //all functions is over here
       this.isLog = false;
     }, 1000);
   }

npm/ng-packs/apps/dev-app/src/app/home/home.module.ts

@@ -2,9 +2,10 @@ import { NgModule } from '@angular/core';
 import { SharedModule } from '../shared/shared.module';
 import { HomeRoutingModule } from './home-routing.module';
 import { HomeComponent } from './home.component';
+import { LoadingDirective, ThemeSharedModule } from '@abp/ng.theme.shared';
 
 @NgModule({
   declarations: [HomeComponent],
-  imports: [SharedModule, HomeRoutingModule],
+  imports: [SharedModule, HomeRoutingModule, ThemeSharedModule],
 })
 export class HomeModule {}