fix(spinner): animation not being cleaned up when used with AoT (#1838)

Fixes #1283.
angular · Nov 15, 2016 · 83de14f · 83de14f
1 parent a40cae9
commit 83de14f
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 1 deletion.
diff --git a/src/lib/progress-circle/progress-circle.spec.ts b/src/lib/progress-circle/progress-circle.spec.ts
@@ -14,6 +14,7 @@ describe('MdProgressCircular', () => {
         IndeterminateProgressSpinner,
         ProgressSpinnerWithValueAndBoundMode,
         IndeterminateProgressSpinnerWithNgIf,
+        SpinnerWithNgIf,
       ],
     });
 
@@ -90,6 +91,20 @@ describe('MdProgressCircular', () => {
     fixture.detectChanges();
     expect(progressElement.componentInstance.interdeterminateInterval).toBeFalsy();
   });
+
+  it('should clean up the animation when a spinner is destroyed', () => {
+    let fixture = TestBed.createComponent(SpinnerWithNgIf);
+    fixture.detectChanges();
+
+    let progressElement = fixture.debugElement.query(By.css('md-spinner'));
+
+    expect(progressElement.componentInstance.interdeterminateInterval).toBeTruthy();
+
+    fixture.debugElement.componentInstance.isHidden = true;
+    fixture.detectChanges();
+
+    expect(progressElement.componentInstance.interdeterminateInterval).toBeFalsy();
+  });
 });
 
 
@@ -105,3 +120,6 @@ class ProgressSpinnerWithValueAndBoundMode { }
 @Component({template: `
     <md-progress-circle mode="indeterminate" *ngIf="!isHidden"></md-progress-circle>`})
 class IndeterminateProgressSpinnerWithNgIf { }
+
+@Component({template: `<md-spinner *ngIf="!isHidden"></md-spinner>`})
+class SpinnerWithNgIf { }
diff --git a/src/lib/progress-circle/progress-circle.ts b/src/lib/progress-circle/progress-circle.ts
@@ -244,11 +244,17 @@ export class MdProgressCircle implements OnDestroy {
   templateUrl: 'progress-circle.html',
   styleUrls: ['progress-circle.css'],
 })
-export class MdSpinner extends MdProgressCircle {
+export class MdSpinner extends MdProgressCircle implements OnDestroy {
   constructor(changeDetectorRef: ChangeDetectorRef, elementRef: ElementRef, ngZone: NgZone) {
     super(changeDetectorRef, ngZone, elementRef);
     this.mode = 'indeterminate';
   }
+
+  ngOnDestroy() {
+    // The `ngOnDestroy` from `MdProgressCircle` should be called explicitly, because
+    // in certain cases Angular won't call it (e.g. when using AoT and in unit tests).
+    super.ngOnDestroy();
+  }
 }