I have a directive in the angle 1, that in any request (PUT, GET, POST and DELETE), it puts a color on the screen, plus a loading image, made by a CSS

I tried to angle 2, but I could not.

Code

In index.html, it has <loading></loading>

"use strict";

var module = angular.module("diretivas");

module.directive('loading', ['$http', function ($http) {
    var html = '<div data-loading id="splash" class="splash-in-backdrop splash"><div class="splash-in-centro"><div class="loader"></div><img class="logo-splash" src="/desif/images/logo-desif.svg"></div></div>';
    return {
      restrict: 'E',
      replace: true,
      template: html,
      link: function (scope, element, attrs) {

        console.log("element: "+element);

        scope.isLoading2 = function () {
          return $http.pendingRequests.length > 0;
        };

        console.log("fn: "+ scope.isLoading2());

        scope.$watch(scope.isLoading2, function (value) {
            console.log(value);
          if (value) {
            element.removeClass('ng-hide');
          } else {
            element.addClass('ng-hide');
          }
        });
      }
    };
}]);

The component has been created.

I just could not execute

Follow the codes:

page-loader.component.css

  

.loader-outter {width: 128px; height: 128px; background:

     

2b3e50; background: url ('./load.png') center center no-repeat; position: fixed; left: 0; right: 0; top: 0;

     

bottom: 0; margin: auto; / * this to solve "the content will not be   cut when the window is smaller than the content ": * / max-width:   100%; max-height: 100%; overflow: hidden; }

     

.loader-spinner {width: 128px; height: 128px; }

     

.loader-outter, .loader-spinner {border-radius: 50%; }

     

.loader-outter > .loader-spinner {border: 8px solid # 4e5d6c; / *   Light gray / border-top: 8px solid # 5cb85c; / green * /
  animation: spin .8s linear infinite; }

     

@keyframes spin {0% {transform: rotate (0deg); } 100% {   transform: rotate (360deg); }}

page-loader.component.html

page-loader.component.ts

  

import {Component, OnInit} from '@ angular / core';

     

@Component ({selector: 'gro-page-loader', templateUrl:   './page-loader.component.html', styleUrls:   ['./page-loader.component.css']}) export class PageLoaderComponent   implements OnInit {

     

builder (          ) {}

     

ngOnInit () {}

     

}

page-loading.ts

  

export class PageLoading {

     

protected isLoading: boolean;

     

constructor (isLoading: boolean) {       this.isLoading = isLoading; }

     

protected standby () {       this.isLoading = true; }

     

protected ready () {       this.isLoading = false; }}