ng-loading-bar - npm Package Compare versions

Comparing version 0.0.9 to 0.0.10

bundles/ng-loading-bar.umd.js

@@ -217,3 +217,3 @@ (function (global, factory) {
     NgLoadingBarComponent.prototype.setElementStyle = function (el, styleName, styleValue) {
-        this._renderer.setElementStyle(el.nativeElement, styleName, styleValue);
+        this._renderer.setStyle(el.nativeElement, styleName, styleValue);
     };
@@ -232,3 +232,3 @@ return NgLoadingBarComponent;
 NgLoadingBarComponent.ctorParameters = function () { return [
-    { type: _angular_core.Renderer, },
+    { type: _angular_core.Renderer2, },
     { type: NgLoadingBarHttp, decorators: [{ type: _angular_core.Inject, args: [_angular_http.Http,] },] },
@@ -252,2 +252,5 @@ ]; };
     function NgLoadingBarModule() {
+        if (_angular_core.isDevMode()) {
+            console.warn("'ng-loading-bar' is deprecated, use '@ngx-loading-bar/http' instead");
+        }
     }
@@ -254,0 +257,0 @@ /**

loading-bar.component.d.ts

@@ -1,2 +0,2 @@
-import { Renderer, AfterViewInit } from '@angular/core';
+import { Renderer2, AfterViewInit } from '@angular/core';
 import { NgLoadingBarHttp } from './loading-bar.http';
@@ -18,3 +18,3 @@ export declare class NgLoadingBarComponent implements AfterViewInit {
     private _startTimeout;
-    constructor(_renderer: Renderer, http: NgLoadingBarHttp);
+    constructor(_renderer: Renderer2, http: NgLoadingBarHttp);
     ngAfterViewInit(): void;
@@ -21,0 +21,0 @@ /**

loading-bar.module.d.ts

@@ -6,2 +6,3 @@ import { ModuleWithProviders } from '@angular/core';
     static forRoot(): ModuleWithProviders;
+    constructor();
 }

ng-loading-bar.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":3,"metadata":{"ɵa":{"__symbolic":"function","parameters":["xhrBackend","requestOptions"],"value":{"__symbolic":"new","expression":{"__symbolic":"reference","name":"NgLoadingBarHttp"},"arguments":[{"__symbolic":"reference","name":"xhrBackend"},{"__symbolic":"reference","name":"requestOptions"}]}},"NgLoadingBarModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","name":"NgLoadingBarComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/http","name":"HttpModule"}],"exports":[{"__symbolic":"reference","name":"NgLoadingBarComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"NgLoadingBarModule"},"providers":[{"provide":{"__symbolic":"reference","module":"@angular/http","name":"Http"},"useFactory":{"__symbolic":"reference","name":"ɵa"},"deps":[{"__symbolic":"reference","module":"@angular/http","name":"XHRBackend"},{"__symbolic":"reference","module":"@angular/http","name":"RequestOptions"}]}]}}}},"NgLoadingBarHttp":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@angular/http","name":"Http"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"request":[{"__symbolic":"method"}],"requestStarted":[{"__symbolic":"method"}],"requestEnded":[{"__symbolic":"method"}]}},"NgLoadingBarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ng-loading-bar","template":"\n        <div id=\"loading-bar-spinner\" #loadingBarSpinner><div class=\"spinner-icon\"></div></div>\n        <div id=\"loading-bar\" #loadingBarContainer><div class=\"bar\" #loadingBar><div class=\"peg\"></div></div></div>\n    "}]}],"members":{"_spinner":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["loadingBarSpinner"]}]}],"_loadingBarContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["loadingBarContainer"]}]}],"_loadingBar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["loadingBar"]}]}],"includeSpinner":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"@angular/http","name":"Http"}]}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer"},{"__symbolic":"reference","name":"NgLoadingBarHttp"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"start":[{"__symbolic":"method"}],"set":[{"__symbolic":"method"}],"complete":[{"__symbolic":"method"}],"inc":[{"__symbolic":"method"}],"show":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"setElementStyle":[{"__symbolic":"method"}]}}},"origins":{"ɵa":"./loading-bar.module","NgLoadingBarModule":"./loading-bar.module","NgLoadingBarHttp":"./loading-bar.http","NgLoadingBarComponent":"./loading-bar.component"},"importAs":"ng-loading-bar"}
+{"__symbolic":"module","version":3,"metadata":{"ɵa":{"__symbolic":"function","parameters":["xhrBackend","requestOptions"],"value":{"__symbolic":"new","expression":{"__symbolic":"reference","name":"NgLoadingBarHttp"},"arguments":[{"__symbolic":"reference","name":"xhrBackend"},{"__symbolic":"reference","name":"requestOptions"}]}},"NgLoadingBarModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","name":"NgLoadingBarComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/http","name":"HttpModule"}],"exports":[{"__symbolic":"reference","name":"NgLoadingBarComponent"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"NgLoadingBarModule"},"providers":[{"provide":{"__symbolic":"reference","module":"@angular/http","name":"Http"},"useFactory":{"__symbolic":"reference","name":"ɵa"},"deps":[{"__symbolic":"reference","module":"@angular/http","name":"XHRBackend"},{"__symbolic":"reference","module":"@angular/http","name":"RequestOptions"}]}]}}}},"NgLoadingBarHttp":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@angular/http","name":"Http"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"request":[{"__symbolic":"method"}],"requestStarted":[{"__symbolic":"method"}],"requestEnded":[{"__symbolic":"method"}]}},"NgLoadingBarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ng-loading-bar","template":"\n        <div id=\"loading-bar-spinner\" #loadingBarSpinner><div class=\"spinner-icon\"></div></div>\n        <div id=\"loading-bar\" #loadingBarContainer><div class=\"bar\" #loadingBar><div class=\"peg\"></div></div></div>\n    "}]}],"members":{"_spinner":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["loadingBarSpinner"]}]}],"_loadingBarContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["loadingBarContainer"]}]}],"_loadingBar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["loadingBar"]}]}],"includeSpinner":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"@angular/http","name":"Http"}]}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"},{"__symbolic":"reference","name":"NgLoadingBarHttp"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"start":[{"__symbolic":"method"}],"set":[{"__symbolic":"method"}],"complete":[{"__symbolic":"method"}],"inc":[{"__symbolic":"method"}],"show":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"setElementStyle":[{"__symbolic":"method"}]}}},"origins":{"ɵa":"./loading-bar.module","NgLoadingBarModule":"./loading-bar.module","NgLoadingBarHttp":"./loading-bar.http","NgLoadingBarComponent":"./loading-bar.component"},"importAs":"ng-loading-bar"}

ng-loading-bar/ng-loading-bar.es5.js

@@ -11,3 +11,3 @@ var __extends = (this && this.__extends) || (function () {
 })();
-import { Component, Inject, Injectable, Input, NgModule, Renderer, ViewChild } from '@angular/core';
+import { Component, Inject, Injectable, Input, NgModule, Renderer2, ViewChild, isDevMode } from '@angular/core';
 import { Http, HttpModule, RequestOptions, XHRBackend } from '@angular/http';
@@ -216,3 +216,3 @@ import { Subject } from 'rxjs/Subject';
     NgLoadingBarComponent.prototype.setElementStyle = function (el, styleName, styleValue) {
-        this._renderer.setElementStyle(el.nativeElement, styleName, styleValue);
+        this._renderer.setStyle(el.nativeElement, styleName, styleValue);
     };
@@ -231,3 +231,3 @@ return NgLoadingBarComponent;
 NgLoadingBarComponent.ctorParameters = function () { return [
-    { type: Renderer, },
+    { type: Renderer2, },
     { type: NgLoadingBarHttp, decorators: [{ type: Inject, args: [Http,] },] },
@@ -251,2 +251,5 @@ ]; };
     function NgLoadingBarModule() {
+        if (isDevMode()) {
+            console.warn("'ng-loading-bar' is deprecated, use '@ngx-loading-bar/http' instead");
+        }
     }
@@ -253,0 +256,0 @@ /**

ng-loading-bar/ng-loading-bar.js

@@ -1,2 +0,2 @@
-import { Component, Inject, Injectable, Input, NgModule, Renderer, ViewChild } from '@angular/core';
+import { Component, Inject, Injectable, Input, NgModule, Renderer2, ViewChild, isDevMode } from '@angular/core';
 import { Http, HttpModule, RequestOptions, XHRBackend } from '@angular/http';
@@ -199,3 +199,3 @@ import { Subject } from 'rxjs/Subject';
     setElementStyle(el, styleName, styleValue) {
-        this._renderer.setElementStyle(el.nativeElement, styleName, styleValue);
+        this._renderer.setStyle(el.nativeElement, styleName, styleValue);
     }
@@ -216,3 +216,3 @@ }
 NgLoadingBarComponent.ctorParameters = () => [
-    { type: Renderer, },
+    { type: Renderer2, },
     { type: NgLoadingBarHttp, decorators: [{ type: Inject, args: [Http,] },] },
@@ -236,2 +236,7 @@ ];
 class NgLoadingBarModule {
+    constructor() {
+        if (isDevMode()) {
+            console.warn(`'ng-loading-bar' is deprecated, use '@ngx-loading-bar/http' instead`);
+        }
+    }
     /**
@@ -238,0 +243,0 @@ * @return {?}

package.json

 {
   "name": "ng-loading-bar",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "main": "bundles/ng-loading-bar.umd.js",
@@ -5,0 +5,0 @@ "module": "ng-loading-bar/ng-loading-bar.es5.js",

README.md

@@ -0,9 +1,34 @@
+# @ngx-loading-bar
+
+A fully automatic loading bar with zero configuration for angular app (http, http-client and router).
+
+## Packages
+- [@ngx-loading-bar/router](./packages/router/README.md) - Display loading bar when navigating between routes.
+- [@ngx-loading-bar/http-client](./packages/http-client/README.md) - Display the progress of your `@angular/common/http` requests.
+- [@ngx-loading-bar/http](./packages/http/README.md) - Display the progress of your `@angular/http` requests.
+- [@ngx-loading-bar/core](./packages/core/README.md) - Core module to manage the progress bar manually.
+
+## Demo
+- online demo: https://angular-sypacw.stackblitz.io
+- [demo-app](./demo): Example utilizing all @ngx-loading-bar libraries.
+
 ## Quick Start
 
-#### 1. Install ng-loading-bar
+#### 1. Install one or all @ngx-loading-bar libraries:
+
 ```bash
-  npm install ng-loading-bar --save
+  # if you use `@angular/common/http`
+  npm install @ngx-loading-bar/http-client --save
+
+  # if you use `@angular/http`
+  npm install @ngx-loading-bar/http --save
+
+  # if you use `@angular/router`
+  npm install @ngx-loading-bar/router --save
+
+  # to manage loading-bar manually
+  npm install @ngx-loading-bar/core --save
 ```
 
-#### 2. Import the `NgLoadingBarModule`:
+#### 2. Import the installed libraries (`LoadingBarHttpClientModule`, `LoadingBarHttpModule`, `LoadingBarRouterModule` or `LoadingBarModule`):
 
@@ -13,21 +38,40 @@ ```ts
 import { BrowserModule } from '@angular/platform-browser';
-import { HttpModule } from '@angular/http';
-import { NgLoadingBarModule } from 'ng-loading-bar';
+
+import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client';
+
+// for Http import LoadingBarHttpModule:
+// import { LoadingBarHttpModule } from '@ngx-loading-bar/http';
+
+// for Router import LoadingBarRouterModule:
+// import { LoadingBarRouterModule } from '@ngx-loading-bar/router';
+
+// for Core import LoadingBarModule:
+// import { LoadingBarModule } from '@ngx-loading-bar/core';
+
 import { AppComponent } from './app';
 
 @NgModule({
+  ...
   imports: [
-    BrowserModule,
-    HttpModule,
-    NgLoadingBarModule.forRoot(),
+    ...
+
+    LoadingBarHttpClientModule
+
+    // for HttpClient use:
+    // LoadingBarHttpModule,
+
+    // for Router use:
+    // LoadingBarRouterModule
+
+    // for HttpClient use:
+    // LoadingBarHttpClientModule
+
+    // for Core use:
+    // LoadingBarHttpClientModule.forRoot()
   ],
-  declarations: [ AppComponent ],
-  bootstrap: [ AppComponent ],
 })
-export class AppModule {
-}
-
+export class AppModule {}
 ```
 
-#### 3. Include `ng-loading-bar` in your app component:
+#### 3. Include `ngx-loading-bar` in your app component:
 
@@ -41,3 +85,3 @@ ```ts
     ...
-    <ng-loading-bar></ng-loading-bar>
+    <ngx-loading-bar></ngx-loading-bar>
   `,
@@ -50,4 +94,95 @@ })
 #### 4. include the supplied CSS file (or create your own).
-  - `loading-bar.css`
+  - [loading-bar.css](loading-bar.css)
+  
 
-Based on https://github.com/sir-valentin/Angular2LoadingBar.git
+## Manually manage loading service 
+
+#### 1. Import the `LoadingBarModule`
+
+```ts
+import { NgModule } from '@angular/core';
+
+import { LoadingBarModule } from '@ngx-loading-bar/core';
+
+@NgModule({
+  ...
+  imports: [
+    ...
+
+    LoadingBarModule.forRoot(),
+  ],
+})
+export class AppModule {}
+```
+
+#### 2. Inject/Use LoadingBarService
+
+```ts
+import { Component } from '@angular/core';
+import { LoadingBarService } from '@ngx-loading-bar/core';
+
+@Component({
+  selector: 'app',
+  template: `
+    ...
+    <ngx-loading-bar></ngx-loading-bar>
+    <button (click)="startLoading()">start</button>
+    <button (click)="stopLoading()">stop</button>
+  `,
+})
+export class App {
+    constructor(private loadingBar: LoadingBarService) {}
+
+    startLoading() {
+        this.loadingBar.start();
+    }
+    
+    stopLoading() {
+        this.loadingBar.complete();
+    }
+}
+```
+
+## Advanced
+
+When you import LoadingBarHttpModule, http service observables become hot. That means that a HTTP request 
+is sent as soon as a call to http.get (for example) has been made.
+
+```ts
+
+import { Component } from '@angular/core';
+import { Http } from '@angular/http';
+
+
+@Component({
+    selector: 'ng-loading-bar-app',
+    templateUrl: './app.html',
+})
+export class App {
+    private request$;
+
+    constructor(private _http: Http) {
+        // http request is sent here
+        this.request$ = _http.get('/app/heroes');
+    }
+
+    startLoadingBarHttpRequest() {
+        if (false) {
+            // Request has been sent to server 
+            this.request$.subscribe();
+        }
+    }
+}
+
+```
+
+This behavior is because the Loading bar module overrides default http service by setting up a subscription to the request. 
+This subscription fires up the HTTP request. 
+
+If this behavior doesn't suit you, you should manage loading bar manually as in the component startHttpRequest above.
+
+
+# Credits 
+
+- [angular-loading-bar](https://github.com/chieffancypants/angular-loading-bar)
+- https://github.com/sir-valentin/Angular2LoadingBar.git

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

93035

increased by3.25%

Number of medium maintenance alerts

0

decreased by-100%

Number of lines in readme file

185

increased by262.75%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of package files

15

decreased by-21.05%

Lines of code

1006

decreased by-3.73%

No dependency changes