Skip to content

Commit 83de14f

Browse files
crisbetokara
authored andcommitted
fix(spinner): animation not being cleaned up when used with AoT (#1838)
Fixes #1283.
1 parent a40cae9 commit 83de14f

File tree

2 files changed

+25
-1
lines changed

2 files changed

+25
-1
lines changed

src/lib/progress-circle/progress-circle.spec.ts

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ describe('MdProgressCircular', () => {
1414
IndeterminateProgressSpinner,
1515
ProgressSpinnerWithValueAndBoundMode,
1616
IndeterminateProgressSpinnerWithNgIf,
17+
SpinnerWithNgIf,
1718
],
1819
});
1920

@@ -90,6 +91,20 @@ describe('MdProgressCircular', () => {
9091
fixture.detectChanges();
9192
expect(progressElement.componentInstance.interdeterminateInterval).toBeFalsy();
9293
});
94+
95+
it('should clean up the animation when a spinner is destroyed', () => {
96+
let fixture = TestBed.createComponent(SpinnerWithNgIf);
97+
fixture.detectChanges();
98+
99+
let progressElement = fixture.debugElement.query(By.css('md-spinner'));
100+
101+
expect(progressElement.componentInstance.interdeterminateInterval).toBeTruthy();
102+
103+
fixture.debugElement.componentInstance.isHidden = true;
104+
fixture.detectChanges();
105+
106+
expect(progressElement.componentInstance.interdeterminateInterval).toBeFalsy();
107+
});
93108
});
94109

95110

@@ -105,3 +120,6 @@ class ProgressSpinnerWithValueAndBoundMode { }
105120
@Component({template: `
106121
<md-progress-circle mode="indeterminate" *ngIf="!isHidden"></md-progress-circle>`})
107122
class IndeterminateProgressSpinnerWithNgIf { }
123+
124+
@Component({template: `<md-spinner *ngIf="!isHidden"></md-spinner>`})
125+
class SpinnerWithNgIf { }

src/lib/progress-circle/progress-circle.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -244,11 +244,17 @@ export class MdProgressCircle implements OnDestroy {
244244
templateUrl: 'progress-circle.html',
245245
styleUrls: ['progress-circle.css'],
246246
})
247-
export class MdSpinner extends MdProgressCircle {
247+
export class MdSpinner extends MdProgressCircle implements OnDestroy {
248248
constructor(changeDetectorRef: ChangeDetectorRef, elementRef: ElementRef, ngZone: NgZone) {
249249
super(changeDetectorRef, ngZone, elementRef);
250250
this.mode = 'indeterminate';
251251
}
252+
253+
ngOnDestroy() {
254+
// The `ngOnDestroy` from `MdProgressCircle` should be called explicitly, because
255+
// in certain cases Angular won't call it (e.g. when using AoT and in unit tests).
256+
super.ngOnDestroy();
257+
}
252258
}
253259

254260

0 commit comments

Comments
 (0)