How To Make A Preloader With Angular2

What is the suggested way to implement a preloader in Angular 2?

Solution 1:

If you are talking about spinner in Angular2 then you should consider below answer.

I found spinner implementation very easy with Angular2. For that, I have created sharedService and sharedObject.

sharedService has two methods namely showLoader() and hideLoader() which manages loader object and set its isLoading property to true and false respectively. loader object is a sharedObject so if you change its isLoading property to true or false, main component's *ngIf="loader.isLoading" part will react accordingly as shown here in below link.

Plunker - Spinner implementation with sharedService and sharedobject

NOTE : There are different ways to implement spinner. Yon can make spinner component and play with hide/show. So there could be some other easy ways too. In fact there are multiple ways to deal with spinner.

sharedService.ts

import {Component, Injectable} from'angular2/core'exportinterface ILoader {
   isLoading:boolean=false;
}

@Injectable()
exportclasssharedService { 
  loader:ILoader={isLoading:false}; 
  showLoader()
  {
    console.log('showloader started');
    this.loader.isLoading=true;
  }
  hideLoader()
  {
    this.loader.isLoading=false;
  }
} 

boot.ts

import {Component,bind} from 'angular2/core';
import {ROUTER_PROVIDERS,RouteConfig, ROUTER_DIRECTIVES,APP_BASE_HREF,LocationStrategy,RouteParams,ROUTER_BINDINGS} from 'angular2/router';
import {bootstrap}        from 'angular2/platform/browser';
import {HTTP_PROVIDERS} from 'angular2/http';
import 'rxjs/Rx';

import{ComponentOne} from 'src/cone';
import{ComponentTwo} from 'src/ctwo';
import{FriendsList} from 'src/myfriends';
import {sharedService} from 'src/sharedService';

@Component({
  selector: 'my-app',
  template: `

   <-- html required for spinner ------------------------>

   <style>#mydiv {  
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      z-index:1000;
      background-color:grey;
      opacity: .8;
     }

   .ajax-loader {
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -32px; /* -1 * image width / 2 */margin-top: -32px;  /* -1 * image height / 2 */display: block;     
    }

    </style><divid="mydiv" *ngIf="loader.isLoading"><imgsrc="lib/jQuery/images/ajax-loader.gif"class="ajax-loader"/></div> 

  <-- til here for spinner ------------------------>

    <h1>Component Router</h1><nav><a [routerLink]="['ComponentOne']">One</a><hr/><a [routerLink]="['ComponentTwo']">Two</a><hr/><a [routerLink]="['FriendsList']">Friends</a></nav><router-outlet></router-outlet>
`,
  directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
  {path:'/component-one', name: 'ComponentOne', component: ComponentOne},
  {path:'/component-two', name: 'ComponentTwo', component: ComponentTwo}
  {path:'/myfriends', name: 'FriendsList', component:FriendsList}
])
export class AppComponent {
  loader:ILoader;
  constructor(private ss:sharedService)
  {
    this.loader=this.ss.loader;
  }

}

bootstrap(AppComponent, [HTTP_PROVIDERS,sharedService,
      ROUTER_PROVIDERS,bind(APP_BASE_HREF).toValue(location.pathname)
]);

myFriends.ts

import {Component,View,CORE_DIRECTIVES} from'angular2/core';
 import {Http, Response,HTTP_PROVIDERS} from'angular2/http';
 import'rxjs/Rx';
 import {Observable} from'rxjs/Observable';
 import {sharedService} from'src/sharedService';

 @Component({
    template: `
    <h1>My Friends</h1>
    <ul>
      <li *ngFor="#frnd of result">
          {{frnd.name}} is {{frnd.age}} years old.
      </li>
    </ul>
  `,
    directive:[CORE_DIRECTIVES]

  })

  exportclassFriendsList{

      result:Array<Object>; 

      constructor(http: Http,private ss:sharedService) { 

           this.ss.showLoader();

           this.ss.fetchData().subscribe((result) =>{ 
                    this.result =result
                    },
                    (err)=>console.log(err),
                    ()=>{
                          console.log("Done")
                          this.ss.hideLoader();
                   });
        }
  }

Solution 2:

You can try this tutorial:

Article link: https://blog.slinto.sk/angular-http-preloaders-3ee7bd937ee0

GitHub Repository: https://github.com/slinto/ng-preloader-example