How to make a preloader with Angular2

Question

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

Answer 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'

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

   

    

    
    
 

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

    
Component Router
    

      One

      Two

      Friends
    
    
`,
  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: `
    
My Friends
    

      

          {{frnd.name}} is {{frnd.age}} years old.
      
    
  `,
    directive:[CORE_DIRECTIVES]

  })

  export class FriendsList{

      result:Array