Angular 2 event when any [routerLink] is clicked

user_818991 0
Viewed 42119

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

angular2-routing angular
3 Answers

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 -->
user_13565780
Related