Show loading screen when navigating between routes in Angular 2

Question

How do I show a loading screen when I change a route in Angular 2

User · Answer

Why not just using simple css      lt router-outlet gt  lt  router-outlet gt   lt div class  loading  gt  lt  div gt    And in your styles     div loading      height  100px      background-color  red      display  none    router-outlet   div loading      display  block      Or even we can do this for the first answer     lt router-outlet gt  lt  router-outlet gt   lt spinner-component gt  lt  spinner-component gt    And then simply just   spinner-component     display none    router-outlet   spinner-component      display  block      The trick here is  the new routes and components will always appear after router-outlet   so with a simple css selector we can show and hide the loading

User · Answer

The current Angular Router provides Navigation Events  You can subscribe to these and make UI changes accordingly  Remember to count in other Events such as NavigationCancel and NavigationError to stop your spinner in case router transitions fail   app component ts - your root component      import     Router       import as RouterEvent to avoid confusion with the DOM Event   Event as RouterEvent    NavigationStart    NavigationEnd    NavigationCancel    NavigationError   from   angular router    Component     export class AppComponent         Sets initial value to true to show loading spinner on first load   loading   true    constructor private router  Router        this router events subscribe  e   RouterEvent    gt           this navigationInterceptor e                     Shows and hides the loading spinner during RouterEvent changes   navigationInterceptor event  RouterEvent   void       if  event instanceof NavigationStart          this loading   true           if  event instanceof NavigationEnd          this loading   false               Set loading state to false in both of the below events to hide the spinner in case a request fails     if  event instanceof NavigationCancel          this loading   false           if  event instanceof NavigationError          this loading   false               app component html - your root view   lt div class  loading-overlay   ngIf  loading  gt       lt  -- show something fancy here  here with Angular 2 Material s loading bar or circle -- gt       lt md-progress-bar mode  indeterminate  gt  lt  md-progress-bar gt   lt  div gt    Performance Improved Answer  If you care about performance there is a better method  it is slightly more tedious to implement but the performance improvement will be worth the extra work  Instead of using  ngIf to conditionally show the spinner  we could leverage Angular s NgZone and Renderer to switch on   off the spinner which will bypass Angular s change detection when we change the spinner s state  I found this to make the animation smoother compared to using  ngIf or an async pipe   This is similar to my previous answer with some tweaks   app component ts - your root component      import     Router       import as RouterEvent to avoid confusion with the DOM Event   Event as RouterEvent    NavigationStart    NavigationEnd    NavigationCancel    NavigationError   from   angular router  import  NgZone  Renderer  ElementRef  ViewChild  from   angular core     Component     export class AppComponent         Instead of holding a boolean value for whether the spinner      should show or not  we store a reference to the spinner element       see template snippet below this script    ViewChild  spinnerElement     spinnerElement  ElementRef    constructor private router  Router                private ngZone  NgZone                private renderer  Renderer        router events subscribe this  navigationInterceptor            Shows and hides the loading spinner during RouterEvent changes   private  navigationInterceptor event  RouterEvent   void       if  event instanceof NavigationStart             We wanna run this function outside of Angular s zone to          bypass change detection       this ngZone runOutsideAngular      gt               For simplicity we are going to turn opacity on   off            you could add remove a class for more advanced styling            and enter leave animation of the spinner         this renderer setElementStyle            this spinnerElement nativeElement             opacity              1                               if  event instanceof NavigationEnd          this  hideSpinner                Set loading state to false in both of the below events to        hide the spinner in case a request fails     if  event instanceof NavigationCancel          this  hideSpinner             if  event instanceof NavigationError          this  hideSpinner                private  hideSpinner    void          We wanna run this function outside of Angular s zone to        bypass change detection      this ngZone runOutsideAngular      gt             For simplicity we are going to turn opacity on   off          you could add remove a class for more advanced styling          and enter leave animation of the spinner       this renderer setElementStyle          this spinnerElement nativeElement           opacity            0                         app component html - your root view   lt div class  loading-overlay   spinnerElement style  opacity  0   gt       lt  -- md-spinner is short for  lt md-progress-circle mode  indeterminate  gt  lt  md-progress-circle gt  -- gt       lt md-spinner gt  lt  md-spinner gt   lt  div gt

User · Answer

If you have special logic required for the first route only you can do the following  AppComponent     loaded   false       constructor private router  Router               router events pipe filter e   gt  e instanceof NavigationEnd   take 1                        subscribe  e    gt                           this loaded   true                         alert  loaded - this fires only once                            I had a need for this to hide my page footer  which was otherwise appearing at the top of the page  Also if you only want a loader for the first page you can use this

User · Answer

UPDATE 3 Now that I have upgraded to new Router   borislemke s approach will not work if you use CanDeactivate guard  I m degrading to my old method  ie  this answer  UPDATE2  Router events in new-router look promising and the answer by  borislemke seems to cover the main aspect of spinner implementation  I havent t tested it but I recommend it   UPDATE1  I wrote this answer in the era of Old-Router  when there used to be only one event route-changed notified via router subscribe    I also felt overload of the below approach and tried to do it using only router subscribe    and it backfired because there was no way to detect canceled navigation  So I had to revert back to lengthy approach double work      If you know your way around in Angular2  this is what you ll need    Boot ts  import  bootstrap  from   angular platform-browser-dynamic   import  MyApp  from  path to MyApp-Component   import   SpinnerService  from  path to spinner-service    bootstrap MyApp   SpinnerService      Root Component-  MyApp   import   Component   from   angular core   import   SpinnerComponent  from  path to spinner-component    Component     selector   my-app     directives   SpinnerComponent     template          lt spinner-component gt  lt  spinner-component gt        lt router-outlet gt  lt  router-outlet gt          export class MyApp       Spinner-Component  will subscribe to Spinner-service to change the value of active accordingly   import  Component  from   angular core   import   SpinnerService  from  path to spinner-service    Component     selector   spinner-component      template     lt div  ngIf  active  class  spinner loading  gt  lt  div gt      export class SpinnerComponent     public active  boolean     public constructor spinner  SpinnerService        spinner status subscribe  status  boolean    gt          this active   status                  Spinner-Service  bootstrap this service   Define an observable to be subscribed by spinner-component to change the status on change  and function to know and set the spinner active inactive   import  Injectable  from   angular core   import  Subject  from  rxjs Subject   import  rxjs add operator share     Injectable   export class SpinnerService     public status  Subject lt boolean gt    new Subject      private  active  boolean   false     public get active    boolean       return this  active         public set active v  boolean        this  active   v      this status next v          public start    void       this active   true         public stop    void       this active   false          All Other Routes  Components    sample    import   Component  from   angular core   import   SpinnerService  from  path to spinner-service    Component      template    lt div  ngIf   spinner active  id  container  gt Nothing is Loading Now lt  div gt      export class SampleComponent      constructor public spinner  SpinnerService        ngOnInit        this spinner stop       or do it on some other event eg  when xmlhttp request completes loading data for the component        ngOnDestroy        this spinner start

User · Answer

You could also use this existing solution  The demo is here  It looks like youtube loading bar  I just found it and added it to my own project

[html] Show loading screen when navigating between routes in Angular 2

Examples related to html

Examples related to css

Examples related to angular

Examples related to angular2-routing