how do i show css/js spinner in angualrjs 2 using ts or HTML

Question

I cannot understand where to write the my css loader/spinner code exactly and I am also not able to use Jquery is ts language. So how can I show spinner in specific div elements of angularJS 2 page (which is loaded).

Example - Show spinner on page or on specific div element untill the http get data is not received ???

please give you expert opinions and referrences to link to help solve this problem.

For jquery integration http://stackoverflow.com/questions/35054004/how-to-use-jquery-with-javascript-in-angular-2 — null canvas, Jun 10 '16 at 12:38

score 2 · Answer 1 · edited May 23 '17 at 12:25

2

I have implemented this global spinner using shareservice concept. In short, I have made one service for spinner which can be used whenever you want and where ever you want. Have a look here answer is already given

How to make a preloader with Angular2
NOTE: This was made with angular beta version.

service.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;
  }
}

Whether you are using patent-child components, routing or no relation between component, this will be useful I guess.

edited May 23 '17 at 12:25

Community

1
1

answered Jun 10 '16 at 15:54

micronyks

54,797
15
112
146

If a parent component references two child components, how would you inject separate instances of this service in to each child while allowing the parent to set them to a 'Loading' state independently? – ajbeaven Jul 21 '16 at 22:26
use `providers` array or `viewproviders`. – micronyks Jul 22 '16 at 04:42
I haven't used angular 2 before so maybe I'm confused, but how would you reference the child-injected instance from the parent in order to call `showLoader()`? – ajbeaven Jul 24 '16 at 21:37

score 1 · Answer 2 · answered Jul 01 '16 at 12:13

I created a few functions for Show & Hide Page level Loader and Show and Hide Loader Panel/div Container Level ... which manipulates the html directly ....

here's my code

loading = document.createElement('div');
img = document.createElement('img');
constructor() {

    this.img.src = 'app/template/img/loading.gif';
    this.loading.id = 'loading';
    this.loading.appendChild(this.img);
  }

 showPageLoader() {
    document.body.appendChild(this.loading);
  }
  hidePageLoader() {
    document.getElementById('loading').remove();
  }

  showLoader(panelID: string) {
    document.getElementById(panelID).innerHTML += '<div class="loader-text">\
                                                      <div class="text">Loading data\
                                                          <span>\
                                                              <div class="dot dot1"></div>\
                                                              <div class="dot dot2"></div>\
                                                              <div class="dot dot3"></div>\
                                                              <div class="dot dot4"></div>\
                                                          </span>\
                                                      </div>\
                                                  </div>';
    document.getElementById(panelID).className += ' loaded';
  }

  hideLoader(panelID: string) {
    document.getElementById(panelID).className = document.getElementById(panelID).className.replace(' loaded', '');
    $('#' + panelID + '> div.loader-text').html('');
    $('#' + panelID + '> div.loader-text').remove();    
  }

now I just need to use the service to show and hide the loader at page or specific div-panels... Thanx micronyks for the hint

how do i show css/js spinner in angualrjs 2 using ts or HTML

2 Answers2