I am attempting to display a loading icon while the route resolver is fetching data from the database.
Here is what I have tried:
Main Component:
_router.events.subscribe((routerEvent: RouterEvent) => {
if (routerEvent instanceof NavigationStart) {
console.log("start");
this.loading = true;
} else if (routerEvent instanceof NavigationError || NavigationCancel || NavigationEnd) {
console.log("end");
this.loading = false;
}
});
Main Component HTML:
<h1 *ngIf="loading">Loading</h1>
The loading icon is not displaying at all.
The following message is logged on every route change:
https://i.sstatic.net/WOrIX.png
Update:
Below is the output after making the following changes:
public loading: boolean = true;
console.log(routerEvent);
console.log("Loading is " + this.loading);
https://i.sstatic.net/a2WEv.png
Update 2:
app.component.html:
<div class="uk-offcanvas-content">
<h1>{{loading}}</h1>
<h1 *ngIf="loading">Loading</h1>
<app-root-nav></app-root-nav>
<app-notifications></app-notifications>
<router-outlet></router-outlet>
</div>
app.component.ts:
import {Component, OnInit, AfterViewInit} from '@angular/core';
import {AuthenticationService} from "../../authentication/services/authentication.service";
import {Router, Event, NavigationStart, NavigationEnd, NavigationCancel, NavigationError} from "@angular/router";
import {RouterEvent} from "@angular/router";
import UIkit from 'uikit'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, AfterViewInit {
isLoggedIn: boolean;
public loading: boolean = true;
UIkit: any;
constructor(private _router: Router, private _authService: AuthenticationService) {
_router.events.subscribe((routerEvent: RouterEvent) => {
if (routerEvent instanceof NavigationStart) {
this.loading = true;
console.log(routerEvent);
console.log("Loading is " + this.loading);
} else if (routerEvent instanceof NavigationError || NavigationCancel || NavigationEnd) {
this.loading = false;
}
});
}
ngAfterViewInit() {
}
ngOnInit() {
UIkit.notification({
message: 'my-message!',
status: 'primary',
pos: 'top-right',
timeout: 5000
});
}
}