Angular 2 event when any [routerLink] is clicked

Question

I have a simple Loader Service that hides and shows certain loaders. I'm working on something that will be used a lot with slow connections and I need to show/hide a loader between route changes.

I can hide the loader when the new route is loaded with the following.

this._Router.subscribe(() => {
    this._LoaderService.hide();
})

I'm trying to find a way that I can call my this._LoaderService.show() function immediately when any [routerLink] is clicked (at the start of the route change, not the end).

I've had a look around and I tried https://angular.io/docs/ts/latest/api/router/Router-class.html but I can't seem to figure it out.

Any help appreciated

Answer 1

With this much information it is not possible to tell you correct way, please also note this that loader service implementation varies according to your router implementation.

Either you have to extend route-outlet class and should handle loaderService there OR you have to handle link's click by your own like,

<a  [routeLink]=['User']>User</a>

chage it to,

<a (click)="changeRoute('User')">User</a>

then,

import { Router } from '@angular/router';

constructor(private router: Router){}

changeRoute(routeValue) {
   this._LoaderService.show(); 
   //this will start the loader service.

   this.router.navigate([routeValue]); 
   // you have to check this out by passing required route value.
   // this line will redirect you to your destination. By reaching to destination you can close your loader service.
   // please note this implementation may vary according to your routing code.

}

And when a particular route/link/component becomes active, within that component you can close your loader service whenever and whereever you want to.

Answer 2

You could create your own routerLink directive by extending the default one https://github.com/angular/angular/blob/master/packages/router/src/directives/router_link.ts and override the onClick()

Similar to micronyks answer

 <a  [routeLink]=['User'] (click)="loaderService.show()">User</a>

should work as well but you have to add the click handler everywhwere.

Answer 3

I had quite similar need when integrating bootstrap navbar into Angular2 app.

The solution I came up was binding a boolean variable to control the toggle state of the navbar (equivalent to hide and show on your case).

Once the user clicks on the hamburger icon or the unordered list of the routerLinks, the variable was set accordingly. Note I bind the click event on the parent of the anchors that actually do the routing in Angular.

Looks more convenient then extending the routerLink directive.

<nav class="navbar navbar-default navbar-custom {{isfixed}} {{istransparent}}" *ngIf="showNav" aria-expanded="false">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header page-scroll">
                <button  (click)="isCollapsed = !isCollapsed" type="button" class="navbar-toggle collapsed">
                    <span class="sr-only">Toggle navigation</span>
                    <i class="fa fa-bars"></i>
                </button>
                <a routerLink="/home" routerLinkActive="active" class="navbar-brand">
                    <span><img src="assets/icon/android-icon-36x36.png"></span>
                    {{brandText}}
                </a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"
            [attr.aria-expanded]="!isCollapsed" [ngClass]="{collapse: isCollapsed}">
                <ul class="nav navbar-nav navbar-right" (click)="isCollapsed = !isCollapsed">
                    <li>
                        <a routerLink="/home" routerLinkActive="active">Home</a>
                    </li>
                    <li>
                        <a routerLink="/about" routerLinkActive="active">About</a>
                    </li>
                    <li>
                        <a routerLink="/posts" routerLinkActive="active">Posts</a>
                    </li>
                    <li>
                        <a routerLink="/contact" routerLinkActive="active">Contact</a>
                    </li>
                </ul>
            </div> <!-- /.navbar-collapse -->
        </div> <!-- /.container -->
</nav> <!-- NAV -->