How to make a preloader with Angular2

Question

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

Answer 1

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

I found the spinner implementation very easy with Angular2. For this, I created sharedService and sharedObject .

sharedService has two methods: showLoader() and hideLoader() , which manages the loader object and sets its isLoading property to true and false respectively. loader object is sharedObject , so if you change its isLoading property to true or false , part of the main component *ngIf="loader.isLoading" will respond accordingly, as shown below in the link below.

Plunker - Spinner implementation with sharedService and sharedobject

NOTE. There are various ways to implement a counter. Yon can make a spinner component and play with hide / show. Thus, there may be other simple methods. In fact, there are many ways to deal with spinner.

sharedService.ts

 import {Component, Injectable} from 'angular2/core' export interface ILoader { isLoading:boolean=false; } @Injectable() export class sharedService { 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> <div id="mydiv" *ngIf="loader.isLoading"> <img src="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] }) export class FriendsList{ 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(); }); } } 

Answer 2

You can try this tutorial:

Link to the article: https://blog.slinto.sk/angular-http-preloaders-3ee7bd937ee0

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