updated login button for loading design.

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

@@ -10,18 +10,17 @@
 
     <p class="lead px-lg-5 mx-lg-5">{{ '::LongWelcomeMessage' | abpLocalization }}</p>
 
-    <button
+    <abp-button
       *ngIf="!hasLoggedIn"
+      [loading]="loading"
       (click)="login()"
-      [disabled]="isLog"
+      [disabled]="loading"
-      class="px-4 btn btn-primary ml-1"
+      class="px-4 ml-1"
       role="button"
+      iconClass="fa fa-sign-in"
     >
-      <div class="d-flex">
+      {{ 'AbpAccount::Login' | abpLocalization }}
-        <div><i class="fa fa-sign-in"></i> {{ 'AbpAccount::Login' | abpLocalization }}</div>
+    </abp-button>
-        <div [abpLoading]="isLog" class="" style="margin-bottom: 13px; margin-left: 7px"></div>
-      </div>
-    </button>
   </div>
   <div class="my-3 text-center">
     <h3>Let's improve your application!</h3>

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

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