Merge pull request #119 from MurhafSousli/version4

v4.0.1 Fix progress bar that has no inputs

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 4.0.1
+
+ - fix(NgProgressComponent): Initialize progress bar without inputs, closes [#118](https://github.com/MurhafSousli/ngx-progressbar/issues/118).
+ - refactor(NgProgressComponent): Use `style.transform` instead of `ngStyle` to animate the progress.
+
 ## 4.0.0
 
 - Move **NgProgress** logic to **NgProgressRef**.

lib/core/src/ng-progress.component.ts

@@ -38,7 +38,7 @@ import { map } from 'rxjs/operators/map';
     <ng-container *ngIf="state$ | async; let state">
       <div class="ng-progress-bar" [class.-active]="state.active">
         <div class="bar-placeholder">
-          <div class="bar" [ngStyle]="state.transform">
+          <div class="bar" [style.transform]="state.transform">
             <div *ngIf="meteor" class="meteor"></div>
           </div>
         </div>
@@ -63,7 +63,7 @@ export class NgProgressComponent implements OnInit, OnChanges, OnDestroy {
   progressRef: NgProgressRef;
 
   /** Progress state stream */
-  state$: Observable<{ active: boolean, transform: any }>;
+  state$: Observable<{ active: boolean, transform: string }>;
 
   /** Creates a new instance if id is not already exists */
   @Input() id = 'root';
@@ -89,31 +89,28 @@ export class NgProgressComponent implements OnInit, OnChanges, OnDestroy {
 
   ngOnChanges() {
     if (this.progressRef instanceof NgProgressRef) {
-
       // Update progress bar config when input changes
       this.progressRef.setConfig({
         max: (this.max > 0 && this.max <= 100) ? this.max : 100,
         min: (this.min < 100 && this.min >= 0) ? this.min : 0,
         speed: this.speed,
         trickleSpeed: this.trickleSpeed,
       });
-    } else {
-
-      // Get progress bar service instance
-      this.progressRef = this._ngProgress.ref(this.id, {
-        max: this.max,
-        min: this.min,
-        speed: this.speed,
-        trickleSpeed: this.trickleSpeed,
-      });
-      this.state$ = this.progressRef.state$.pipe(map((state: NgProgressState) => ({
-        active: state.active,
-        transform: {transform: `translate3d(${state.value}%, 0, 0)`}
-      })));
     }
   }
 
   ngOnInit() {
+    // Get progress bar service instance
+    this.progressRef = this._ngProgress.ref(this.id, {
+      max: this.max,
+      min: this.min,
+      speed: this.speed,
+      trickleSpeed: this.trickleSpeed,
+    });
+    this.state$ = this.progressRef.state$.pipe(map((state: NgProgressState) => ({
+      active: state.active,
+      transform: `translate3d(${state.value}%,0,0)`
+    })));
     /** Subscribes to started and completed events when user used them */
     if (this.started.observers.length) {
       this._started$ = this.progressRef.started.subscribe(() => this.started.next());

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ngx-progressbar/demo",
   "description": "A nanoscopic progress bar. Featuring realistic trickle animations to convince your users that something is happening!",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -57,7 +57,7 @@
     "@angular/router": "^5.2.0",
     "core-js": "^2.4.1",
     "github-fork-ribbon-css": "^0.2.1",
-    "rxjs": "^5.5.2",
+    "rxjs": "^5.5.6",
     "zone.js": "^0.8.14"
   },
   "devDependencies": {