chore: fix NgProgress calls

Author: garrappachc

src/app/pages/page/page.component.spec.ts

@@ -12,11 +12,17 @@ class PagesServiceStub {
   fetchPage(_page: Page) { return of('FAKE_BODY'); }
 }
 
-class NgProgressStub {
+class NgProgressRef {
   start() { }
   complete() { }
 }
 
+const progressRef = new NgProgressRef();
+
+class NgProgressStub {
+  ref() { return progressRef; }
+}
+
 describe('PageComponent', () => {
   let component: PageComponent;
   let fixture: ComponentFixture<PageComponent>;
@@ -62,6 +68,14 @@ describe('PageComponent', () => {
     expect(alert.classList.contains('alert-danger')).toBe(true);
   });
 
+  describe('#onInit()', () => {
+    it('should capture NgProgressRef', () => {
+      const spy = spyOn(TestBed.get(NgProgress), 'ref');
+      component.ngOnInit();
+      expect(spy).toHaveBeenCalled();
+    });
+  });
+
   describe('#set page()', () => {
     let mockPage: Page;
     let pagesService: PagesService;
@@ -78,9 +92,8 @@ describe('PageComponent', () => {
     });
 
     it('should start & stop the progress ', fakeAsync(() => {
-      const progress = TestBed.get(NgProgress);
-      const startSpy = spyOn(progress, 'start');
-      const completeSpy = spyOn(progress, 'complete');
+      const startSpy = spyOn(progressRef, 'start');
+      const completeSpy = spyOn(progressRef, 'complete');
 
       component.page = mockPage;
       expect(startSpy).toHaveBeenCalled();

src/app/pages/page/page.component.ts

@@ -1,26 +1,27 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { Page } from '../models/page';
 import { PagesService } from '../pages.service';
-import { NgProgress } from '@ngx-progressbar/core';
+import { NgProgress, NgProgressRef } from '@ngx-progressbar/core';
 
 @Component({
   selector: 'ando-page',
   templateUrl: './page.component.html',
   styleUrls: ['./page.component.css']
 })
-export class PageComponent {
+export class PageComponent implements OnInit {
 
   @Input()
   set page(page: Page) {
-    this.progress.start();
+    this.progressRef.start();
     this.pagesService.fetchPage(page)
       .subscribe(
         body => this.body = body,
         error => this.error = error,
-        this.progress.complete.bind(this.progress)
+        () => this.progressRef.complete(),
       );
   }
 
+  private progressRef: NgProgressRef;
   body: string | undefined;
   error: string | undefined;
 
@@ -29,4 +30,8 @@ export class PageComponent {
     private progress: NgProgress
   ) { }
 
+  ngOnInit() {
+    this.progressRef = this.progress.ref();
+  }
+
 }