CODEWITHSUNDEEP
angular
Abdeali Chandanwala
Abdeali Chandanwala

Reputation: 8828

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

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.

Upvotes: 1

Views: 799

Answers (2)

Abdeali Chandanwala
Abdeali Chandanwala

Reputation: 8828

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

Upvotes: 1

micronyks
micronyks

Reputation: 55443

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.

Upvotes: 2

Related Questions