feat(multiple instance): ngx-progress can be instantiated multiple times

README.md

@@ -52,15 +52,21 @@ import { NgxProgressModule } from '@kken94/ngx-progress';
 })
 export class AppModule {}
 ```
-and place it at the beginning of your **app.component.html** or where you want
+and place it into the element you want to cover.  
+
+**Note:** If you want to use overlay be sure that the parent element has position:relative
+Overlay works with ```position:absolute```, ```top:0```, ```left:0```
 ```
-<ngx-progress></ngx-progress>
-<div>
+<div style="position: relative">
+<ngx-progress [overlay]="true"></ngx-progress>
 ...
 </div>
 ```
 
-**Note:** NgxProgress supports multiple requests. If during the bar progress another request is fired, bar will not reset and keep going until all requests are completed.
+## Feature
+
+- NgxProgress supports multiple requests. If during the bar progress another request is fired, bar will not reset and keep going until all requests are completed.  
+- NgxProgress can be instantiated multiple times. Only the deepest one will be displayed
 
 ## Configuration
 

projects/lib/src/lib/ngx-progress.component.html

@@ -1,4 +1,4 @@
-<ng-container *ngIf="show">
+<ng-container>
   <div class="overlay" *ngIf="progressService.isStarted && overlay"></div>
   <ngx-vendor-bar
     [includeSpinner]="showSpinner"

projects/lib/src/lib/ngx-progress.component.ts

@@ -53,19 +53,17 @@ export class NgxProgressComponent implements OnInit, OnDestroy {
    */
   @Input() spinnerSpeed: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 = 4;
 
-  show = true;
-
   constructor(
     public readonly progressService: NgxProgressService,
     private readonly self: ElementRef<NgxProgressComponent>,
     private readonly register: RegisterService,
   ) {}
 
   ngOnDestroy(): void {
-    this.register.unregisterBar(this.self.nativeElement);
+    this.register.unregisterBar(this.self);
   }
 
   ngOnInit(): void {
-    this.register.registerBar(this.self.nativeElement);
+    this.register.registerBar(this.self);
   }
 }

projects/lib/src/lib/register.service.ts

@@ -1,17 +1,19 @@
-import { Injectable } from '@angular/core';
+import { ElementRef, Injectable } from '@angular/core';
 import { NgxProgressComponent } from './ngx-progress.component';
 
 @Injectable({ providedIn: 'root' })
 export class RegisterService {
-  private readonly existingBars: NgxProgressComponent[] = [];
+  private readonly existingBars: ElementRef<NgxProgressComponent>[] = [];
 
-  registerBar(bar: NgxProgressComponent): void {
-    this.existingBars.push(bar);
+  registerBar(newBar: ElementRef<NgxProgressComponent>): void {
+    this.existingBars.forEach(bar => {
+      bar.nativeElement['style']['display'] = 'none';
+    });
+    this.existingBars.push(newBar);
   }
 
-  unregisterBar(bar: NgxProgressComponent): void {
+  unregisterBar(bar: ElementRef<NgxProgressComponent>): void {
     this.existingBars.splice(this.existingBars.indexOf(bar), 1);
+    this.existingBars[this.existingBars.length - 1]['style']['display'] = 'inherit';
   }
-
-  // TODO: ogni volta che un componente viene registrato o deregistrato solo l'ultimo deve avere la variabile show impostata a true
 }