Angular 6 how to show spinner on menu item or hyperlink click
0
I would like to show a processing spinner in my Angular 6 app sidenav and home component as soon as a menu item, a route link or a hyperlink is clicked. Here are the HomeComponent and SideNav. I also have a spinner in the datasource component and it is working when the app makes connection to the webapi service. I copied the code to the SideNav and Home, but it is not displayed. Thanks for your help.
@Component(
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
)
export class HomeComponent implements OnInit
private spinnerSubject = new BehaviorSubject<boolean> (false);
loading$: Observable<boolean> = this.spinnerSubject.asObservable();
spinnerColor = 'warn';
constructor(
private router: Router,
private activatedRoute: ActivatedRoute)
activatedRoute.url.subscribe((s: UrlSegment) =>
);
ngOnInit()
appCardClicked(routePath: string)
this.spinnerSubject.next(true);
this.router.navigate([routePath],
replaceUrl: true
);
// this.spinnerSubject.next(false);
<div class="spinner-container">
<mat-spinner [color]="spinnerColor" *ngIf="loading$ | async"></mat-spinner>
</div>
<mat-card class="app-card" (click)="appCardClicked('/lccp')">
<mat-card-content>
<p>
A summary goes here.
</p>
</mat-card-content>
<mat-card-actions>
<button mat-button>LIKE</button>
<button mat-button>SHARE</button>
</mat-card-actions>
</mat-card>@Component(
// tslint:disable-next-line:component-selector
selector: 'vertical-nav',
templateUrl: './nav.component.html',
styleUrls: ['./nav.component.css']
)
export class NavComponent implements OnInit, AfterViewInit, AfterContentInit
private spinnerSubject = new BehaviorSubject<boolean>(false);
loading$: Observable<boolean> = this.spinnerSubject.asObservable();
routerLinkClicked(): void
this.spinnerSubject.next(true);
ngAfterContentInit(): void
this.spinnerSubject.next(false);
<mat-sidenav-container class="sidenav-container">
<mat-sidenav #drawer class="sidenav" fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="menuIsOpened || (isHandset$ | async)">
<mat-toolbar class="darkNavy">
<img src="assets/logo.gif" routerLink="/home" style="padding-top:40px" alt="logo" />
</mat-toolbar>
<mat-nav-list style="padding-top:50px">
<a *ngFor="let item of verticleMenu" mat-list-item routerLink="item.RouteLink" (click)="routerLinkClicked()">
item.Title
</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar class="darkNavy">
<mat-nav-list>
<div class='menu' style="display:flex; align-items: flex-end">
<i class="material-icons" aria-label="Side nav toggle icon" (click)="toggleMenu()" matTooltip="menu">menu
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</i>
<span *ngFor="let item of horizontalMenu" mat-list-item routerLink="item.RouteLink">
item.Title
</span>
</div>
</mat-nav-list>
</mat-toolbar>
<ng-content>
<!-- routed content is projected here -->
</ng-content>
<div class="spinner-container" *ngIf="loading$ | async" role="presentation">
<mat-spinner [color]="spinnerColor"></mat-spinner>
</div>
</mat-sidenav-content>
</mat-sidenav-container>angular
asked Nov 13 '18 at 18:12
user266909user266909
81031635
add a comment |
0
I would like to show a processing spinner in my Angular 6 app sidenav and home component as soon as a menu item, a route link or a hyperlink is clicked. Here are the HomeComponent and SideNav. I also have a spinner in the datasource component and it is working when the app makes connection to the webapi service. I copied the code to the SideNav and Home, but it is not displayed. Thanks for your help.
@Component(
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
)
export class HomeComponent implements OnInit
private spinnerSubject = new BehaviorSubject<boolean> (false);
loading$: Observable<boolean> = this.spinnerSubject.asObservable();
spinnerColor = 'warn';
constructor(
private router: Router,
private activatedRoute: ActivatedRoute)
activatedRoute.url.subscribe((s: UrlSegment) =>
);
ngOnInit()
appCardClicked(routePath: string)
this.spinnerSubject.next(true);
this.router.navigate([routePath],
replaceUrl: true
);
// this.spinnerSubject.next(false);
<div class="spinner-container">
<mat-spinner [color]="spinnerColor" *ngIf="loading$ | async"></mat-spinner>
</div>
<mat-card class="app-card" (click)="appCardClicked('/lccp')">
<mat-card-content>
<p>
A summary goes here.
</p>
</mat-card-content>
<mat-card-actions>
<button mat-button>LIKE</button>
<button mat-button>SHARE</button>
</mat-card-actions>
</mat-card>@Component(
// tslint:disable-next-line:component-selector
selector: 'vertical-nav',
templateUrl: './nav.component.html',
styleUrls: ['./nav.component.css']
)
export class NavComponent implements OnInit, AfterViewInit, AfterContentInit
private spinnerSubject = new BehaviorSubject<boolean>(false);
loading$: Observable<boolean> = this.spinnerSubject.asObservable();
routerLinkClicked(): void
this.spinnerSubject.next(true);
ngAfterContentInit(): void
this.spinnerSubject.next(false);
<mat-sidenav-container class="sidenav-container">
<mat-sidenav #drawer class="sidenav" fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="menuIsOpened || (isHandset$ | async)">
<mat-toolbar class="darkNavy">
<img src="assets/logo.gif" routerLink="/home" style="padding-top:40px" alt="logo" />
</mat-toolbar>
<mat-nav-list style="padding-top:50px">
<a *ngFor="let item of verticleMenu" mat-list-item routerLink="item.RouteLink" (click)="routerLinkClicked()">
item.Title
</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar class="darkNavy">
<mat-nav-list>
<div class='menu' style="display:flex; align-items: flex-end">
<i class="material-icons" aria-label="Side nav toggle icon" (click)="toggleMenu()" matTooltip="menu">menu
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</i>
<span *ngFor="let item of horizontalMenu" mat-list-item routerLink="item.RouteLink">
item.Title
</span>
</div>
</mat-nav-list>
</mat-toolbar>
<ng-content>
<!-- routed content is projected here -->
</ng-content>
<div class="spinner-container" *ngIf="loading$ | async" role="presentation">
<mat-spinner [color]="spinnerColor"></mat-spinner>
</div>
</mat-sidenav-content>
</mat-sidenav-container>angular
asked Nov 13 '18 at 18:12
user266909user266909
81031635
This should work. Sample Stackblitz
– Jeto
Nov 13 '18 at 18:44
Thanks. It's identical to what I have. It doesn't work on my app.
– user266909
Nov 13 '18 at 20:24
add a comment |
0
0
0
I would like to show a processing spinner in my Angular 6 app sidenav and home component as soon as a menu item, a route link or a hyperlink is clicked. Here are the HomeComponent and SideNav. I also have a spinner in the datasource component and it is working when the app makes connection to the webapi service. I copied the code to the SideNav and Home, but it is not displayed. Thanks for your help.
@Component(
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
)
export class HomeComponent implements OnInit
private spinnerSubject = new BehaviorSubject<boolean> (false);
loading$: Observable<boolean> = this.spinnerSubject.asObservable();
spinnerColor = 'warn';
constructor(
private router: Router,
private activatedRoute: ActivatedRoute)
activatedRoute.url.subscribe((s: UrlSegment) =>
);
ngOnInit()
appCardClicked(routePath: string)
this.spinnerSubject.next(true);
this.router.navigate([routePath],
replaceUrl: true
);
// this.spinnerSubject.next(false);
<div class="spinner-container">
<mat-spinner [color]="spinnerColor" *ngIf="loading$ | async"></mat-spinner>
</div>
<mat-card class="app-card" (click)="appCardClicked('/lccp')">
<mat-card-content>
<p>
A summary goes here.
</p>
</mat-card-content>
<mat-card-actions>
<button mat-button>LIKE</button>
<button mat-button>SHARE</button>
</mat-card-actions>
</mat-card>@Component(
// tslint:disable-next-line:component-selector
selector: 'vertical-nav',
templateUrl: './nav.component.html',
styleUrls: ['./nav.component.css']
)
export class NavComponent implements OnInit, AfterViewInit, AfterContentInit
private spinnerSubject = new BehaviorSubject<boolean>(false);
loading$: Observable<boolean> = this.spinnerSubject.asObservable();
routerLinkClicked(): void
this.spinnerSubject.next(true);
ngAfterContentInit(): void
this.spinnerSubject.next(false);
<mat-sidenav-container class="sidenav-container">
<mat-sidenav #drawer class="sidenav" fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="menuIsOpened || (isHandset$ | async)">
<mat-toolbar class="darkNavy">
<img src="assets/logo.gif" routerLink="/home" style="padding-top:40px" alt="logo" />
</mat-toolbar>
<mat-nav-list style="padding-top:50px">
<a *ngFor="let item of verticleMenu" mat-list-item routerLink="item.RouteLink" (click)="routerLinkClicked()">
item.Title
</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar class="darkNavy">
<mat-nav-list>
<div class='menu' style="display:flex; align-items: flex-end">
<i class="material-icons" aria-label="Side nav toggle icon" (click)="toggleMenu()" matTooltip="menu">menu
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</i>
<span *ngFor="let item of horizontalMenu" mat-list-item routerLink="item.RouteLink">
item.Title
</span>
</div>
</mat-nav-list>
</mat-toolbar>
<ng-content>
<!-- routed content is projected here -->
</ng-content>
<div class="spinner-container" *ngIf="loading$ | async" role="presentation">
<mat-spinner [color]="spinnerColor"></mat-spinner>
</div>
</mat-sidenav-content>
</mat-sidenav-container>angular
asked Nov 13 '18 at 18:12
user266909user266909
81031635
I would like to show a processing spinner in my Angular 6 app sidenav and home component as soon as a menu item, a route link or a hyperlink is clicked. Here are the HomeComponent and SideNav. I also have a spinner in the datasource component and it is working when the app makes connection to the webapi service. I copied the code to the SideNav and Home, but it is not displayed. Thanks for your help.
@Component(
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
)
export class HomeComponent implements OnInit
private spinnerSubject = new BehaviorSubject<boolean> (false);
loading$: Observable<boolean> = this.spinnerSubject.asObservable();
spinnerColor = 'warn';
constructor(
private router: Router,
private activatedRoute: ActivatedRoute)
activatedRoute.url.subscribe((s: UrlSegment) =>
);
ngOnInit()
appCardClicked(routePath: string)
this.spinnerSubject.next(true);
this.router.navigate([routePath],
replaceUrl: true
);
// this.spinnerSubject.next(false);
<div class="spinner-container">
<mat-spinner [color]="spinnerColor" *ngIf="loading$ | async"></mat-spinner>
</div>
<mat-card class="app-card" (click)="appCardClicked('/lccp')">
<mat-card-content>
<p>
A summary goes here.
</p>
</mat-card-content>
<mat-card-actions>
<button mat-button>LIKE</button>
<button mat-button>SHARE</button>
</mat-card-actions>
</mat-card>@Component(
// tslint:disable-next-line:component-selector
selector: 'vertical-nav',
templateUrl: './nav.component.html',
styleUrls: ['./nav.component.css']
)
export class NavComponent implements OnInit, AfterViewInit, AfterContentInit
private spinnerSubject = new BehaviorSubject<boolean>(false);
loading$: Observable<boolean> = this.spinnerSubject.asObservable();
routerLinkClicked(): void
this.spinnerSubject.next(true);
ngAfterContentInit(): void
this.spinnerSubject.next(false);
<mat-sidenav-container class="sidenav-container">
<mat-sidenav #drawer class="sidenav" fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="menuIsOpened || (isHandset$ | async)">
<mat-toolbar class="darkNavy">
<img src="assets/logo.gif" routerLink="/home" style="padding-top:40px" alt="logo" />
</mat-toolbar>
<mat-nav-list style="padding-top:50px">
<a *ngFor="let item of verticleMenu" mat-list-item routerLink="item.RouteLink" (click)="routerLinkClicked()">
item.Title
</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar class="darkNavy">
<mat-nav-list>
<div class='menu' style="display:flex; align-items: flex-end">
<i class="material-icons" aria-label="Side nav toggle icon" (click)="toggleMenu()" matTooltip="menu">menu
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</i>
<span *ngFor="let item of horizontalMenu" mat-list-item routerLink="item.RouteLink">
item.Title
</span>
</div>
</mat-nav-list>
</mat-toolbar>
<ng-content>
<!-- routed content is projected here -->
</ng-content>
<div class="spinner-container" *ngIf="loading$ | async" role="presentation">
<mat-spinner [color]="spinnerColor"></mat-spinner>
</div>
</mat-sidenav-content>
</mat-sidenav-container>@Component(
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
)
export class HomeComponent implements OnInit
private spinnerSubject = new BehaviorSubject<boolean> (false);
loading$: Observable<boolean> = this.spinnerSubject.asObservable();
spinnerColor = 'warn';
constructor(
private router: Router,
private activatedRoute: ActivatedRoute)
activatedRoute.url.subscribe((s: UrlSegment) =>
);
ngOnInit()
appCardClicked(routePath: string)
this.spinnerSubject.next(true);
this.router.navigate([routePath],
replaceUrl: true
);
// this.spinnerSubject.next(false);
@Component(
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
)
export class HomeComponent implements OnInit
private spinnerSubject = new BehaviorSubject<boolean> (false);
loading$: Observable<boolean> = this.spinnerSubject.asObservable();
spinnerColor = 'warn';
constructor(
private router: Router,
private activatedRoute: ActivatedRoute)
activatedRoute.url.subscribe((s: UrlSegment) =>
);
ngOnInit()
appCardClicked(routePath: string)
this.spinnerSubject.next(true);
this.router.navigate([routePath],
replaceUrl: true
);
// this.spinnerSubject.next(false);
<div class="spinner-container">
<mat-spinner [color]="spinnerColor" *ngIf="loading$ | async"></mat-spinner>
</div>
<mat-card class="app-card" (click)="appCardClicked('/lccp')">
<mat-card-content>
<p>
A summary goes here.
</p>
</mat-card-content>
<mat-card-actions>
<button mat-button>LIKE</button>
<button mat-button>SHARE</button>
</mat-card-actions>
</mat-card><div class="spinner-container">
<mat-spinner [color]="spinnerColor" *ngIf="loading$ | async"></mat-spinner>
</div>
<mat-card class="app-card" (click)="appCardClicked('/lccp')">
<mat-card-content>
<p>
A summary goes here.
</p>
</mat-card-content>
<mat-card-actions>
<button mat-button>LIKE</button>
<button mat-button>SHARE</button>
</mat-card-actions>
</mat-card>@Component(
// tslint:disable-next-line:component-selector
selector: 'vertical-nav',
templateUrl: './nav.component.html',
styleUrls: ['./nav.component.css']
)
export class NavComponent implements OnInit, AfterViewInit, AfterContentInit
private spinnerSubject = new BehaviorSubject<boolean>(false);
loading$: Observable<boolean> = this.spinnerSubject.asObservable();
routerLinkClicked(): void
this.spinnerSubject.next(true);
ngAfterContentInit(): void
this.spinnerSubject.next(false);
@Component(
// tslint:disable-next-line:component-selector
selector: 'vertical-nav',
templateUrl: './nav.component.html',
styleUrls: ['./nav.component.css']
)
export class NavComponent implements OnInit, AfterViewInit, AfterContentInit
private spinnerSubject = new BehaviorSubject<boolean>(false);
loading$: Observable<boolean> = this.spinnerSubject.asObservable();
routerLinkClicked(): void
this.spinnerSubject.next(true);
ngAfterContentInit(): void
this.spinnerSubject.next(false);
<mat-sidenav-container class="sidenav-container">
<mat-sidenav #drawer class="sidenav" fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="menuIsOpened || (isHandset$ | async)">
<mat-toolbar class="darkNavy">
<img src="assets/logo.gif" routerLink="/home" style="padding-top:40px" alt="logo" />
</mat-toolbar>
<mat-nav-list style="padding-top:50px">
<a *ngFor="let item of verticleMenu" mat-list-item routerLink="item.RouteLink" (click)="routerLinkClicked()">
item.Title
</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar class="darkNavy">
<mat-nav-list>
<div class='menu' style="display:flex; align-items: flex-end">
<i class="material-icons" aria-label="Side nav toggle icon" (click)="toggleMenu()" matTooltip="menu">menu
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</i>
<span *ngFor="let item of horizontalMenu" mat-list-item routerLink="item.RouteLink">
item.Title
</span>
</div>
</mat-nav-list>
</mat-toolbar>
<ng-content>
<!-- routed content is projected here -->
</ng-content>
<div class="spinner-container" *ngIf="loading$ | async" role="presentation">
<mat-spinner [color]="spinnerColor"></mat-spinner>
</div>
</mat-sidenav-content>
</mat-sidenav-container><mat-sidenav-container class="sidenav-container">
<mat-sidenav #drawer class="sidenav" fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="menuIsOpened || (isHandset$ | async)">
<mat-toolbar class="darkNavy">
<img src="assets/logo.gif" routerLink="/home" style="padding-top:40px" alt="logo" />
</mat-toolbar>
<mat-nav-list style="padding-top:50px">
<a *ngFor="let item of verticleMenu" mat-list-item routerLink="item.RouteLink" (click)="routerLinkClicked()">
item.Title
</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar class="darkNavy">
<mat-nav-list>
<div class='menu' style="display:flex; align-items: flex-end">
<i class="material-icons" aria-label="Side nav toggle icon" (click)="toggleMenu()" matTooltip="menu">menu
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</i>
<span *ngFor="let item of horizontalMenu" mat-list-item routerLink="item.RouteLink">
item.Title
</span>
</div>
</mat-nav-list>
</mat-toolbar>
<ng-content>
<!-- routed content is projected here -->
</ng-content>
<div class="spinner-container" *ngIf="loading$ | async" role="presentation">
<mat-spinner [color]="spinnerColor"></mat-spinner>
</div>
</mat-sidenav-content>
</mat-sidenav-container>angular
angular
asked Nov 13 '18 at 18:12
user266909user266909
81031635
asked Nov 13 '18 at 18:12
user266909user266909
81031635
edited Nov 13 '18 at 21:54
user266909
asked Nov 13 '18 at 18:12
user266909user266909
81031635
asked Nov 13 '18 at 18:12
user266909user266909
81031635
asked Nov 13 '18 at 18:12
user266909user266909
81031635
81031635
This should work. Sample Stackblitz
– Jeto
Nov 13 '18 at 18:44
Thanks. It's identical to what I have. It doesn't work on my app.
– user266909
Nov 13 '18 at 20:24
add a comment |
This should work. Sample Stackblitz
– Jeto
Nov 13 '18 at 18:44
Thanks. It's identical to what I have. It doesn't work on my app.
– user266909
Nov 13 '18 at 20:24
This should work. Sample Stackblitz
– Jeto
Nov 13 '18 at 18:44
This should work. Sample Stackblitz
– Jeto
Nov 13 '18 at 18:44
Thanks. It's identical to what I have. It doesn't work on my app.
– user266909
Nov 13 '18 at 20:24
Thanks. It's identical to what I have. It doesn't work on my app.
– user266909
Nov 13 '18 at 20:24
add a comment |
1 Answer
1
active
oldest
votes
0
I added a DIV after the ng-content in the nav.component.htm. The spinner in the Nav component is showing up. I also did router.events.subscribe() and exam the event type to toggled on and off the spinner. However, the spinner in the Home component never show up.
answered Nov 13 '18 at 21:50
user266909user266909
81031635
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53287148%2fangular-6-how-to-show-spinner-on-menu-item-or-hyperlink-click%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
I added a DIV after the ng-content in the nav.component.htm. The spinner in the Nav component is showing up. I also did router.events.subscribe() and exam the event type to toggled on and off the spinner. However, the spinner in the Home component never show up.
answered Nov 13 '18 at 21:50
user266909user266909
81031635
add a comment |
0
I added a DIV after the ng-content in the nav.component.htm. The spinner in the Nav component is showing up. I also did router.events.subscribe() and exam the event type to toggled on and off the spinner. However, the spinner in the Home component never show up.
answered Nov 13 '18 at 21:50
user266909user266909
81031635
add a comment |
0
0
0
I added a DIV after the ng-content in the nav.component.htm. The spinner in the Nav component is showing up. I also did router.events.subscribe() and exam the event type to toggled on and off the spinner. However, the spinner in the Home component never show up.
answered Nov 13 '18 at 21:50
user266909user266909
81031635
I added a DIV after the ng-content in the nav.component.htm. The spinner in the Nav component is showing up. I also did router.events.subscribe() and exam the event type to toggled on and off the spinner. However, the spinner in the Home component never show up.
answered Nov 13 '18 at 21:50
user266909user266909
81031635
edited Nov 14 '18 at 1:21
answered Nov 13 '18 at 21:50
user266909user266909
81031635
answered Nov 13 '18 at 21:50
user266909user266909
81031635
answered Nov 13 '18 at 21:50
user266909user266909
81031635
81031635
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53287148%2fangular-6-how-to-show-spinner-on-menu-item-or-hyperlink-click%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
This should work. Sample Stackblitz
– Jeto
Nov 13 '18 at 18:44
Thanks. It's identical to what I have. It doesn't work on my app.
– user266909
Nov 13 '18 at 20:24