fix(progress-bar): changed after checked error on animation end event with noop animations

src/material/progress-bar/progress-bar.scss

@@ -147,7 +147,10 @@ $mat-progress-bar-piece-animation-duration: 250ms !default;
     .mat-progress-bar-secondary.mat-progress-bar-fill::after,
     .mat-progress-bar-background {
       animation: none;
-      transition: none;
+
+      // Use a 1ms transition, because we have an event that
+      // is dispatched based on a `transitionend` being fired.
+      transition-duration: 1ms;
     }
   }
 }

src/material/progress-bar/progress-bar.spec.ts

@@ -1,8 +1,7 @@
-import {TestBed, async, ComponentFixture} from '@angular/core/testing';
+import {TestBed, ComponentFixture} from '@angular/core/testing';
 import {Component, DebugElement, Type} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {dispatchFakeEvent} from '@angular/cdk/testing/private';
-import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {MatProgressBarModule, MAT_PROGRESS_BAR_LOCATION} from './index';
 import {MatProgressBar} from './progress-bar';
 
@@ -261,33 +260,6 @@ describe('MatProgressBar', () => {
     });
   });
 
-  describe('With NoopAnimations', () => {
-    let progressComponent: MatProgressBar;
-    let primaryValueBar: DebugElement;
-    let fixture: ComponentFixture<BasicProgressBar>;
-
-    beforeEach(async(() => {
-      fixture = createComponent(BasicProgressBar, [MatProgressBarModule, NoopAnimationsModule]);
-      const progressElement = fixture.debugElement.query(By.css('mat-progress-bar'))!;
-      progressComponent = progressElement.componentInstance;
-      primaryValueBar = progressElement.query(By.css('.mat-progress-bar-primary'))!;
-    }));
-
-    it('should not bind transition end listener', () => {
-      spyOn(primaryValueBar.nativeElement, 'addEventListener');
-      fixture.detectChanges();
-
-      expect(primaryValueBar.nativeElement.addEventListener).not.toHaveBeenCalled();
-    });
-
-    it('should trigger the animationEnd output on value set', () => {
-      fixture.detectChanges();
-      spyOn(progressComponent.animationEnd, 'next');
-
-      progressComponent.value = 40;
-      expect(progressComponent.animationEnd.next).toHaveBeenCalledWith({ value: 40 });
-    });
-  });
 });
 
 @Component({template: '<mat-progress-bar></mat-progress-bar>'})

src/material/progress-bar/progress-bar.ts

@@ -134,11 +134,6 @@ export class MatProgressBar extends _MatProgressBarMixinBase implements CanColor
   get value(): number { return this._value; }
   set value(v: number) {
     this._value = clamp(coerceNumberProperty(v) || 0);
-
-    // When noop animation is set to true, trigger animationEnd directly.
-    if (this._isNoopAnimation) {
-      this._emitAnimationEnd();
-    }
   }
   private _value: number = 0;
 
@@ -194,31 +189,26 @@ export class MatProgressBar extends _MatProgressBarMixinBase implements CanColor
   }
 
   ngAfterViewInit() {
-    if (!this._isNoopAnimation) {
-      // Run outside angular so change detection didn't get triggered on every transition end
-      // instead only on the animation that we care about (primary value bar's transitionend)
-      this._ngZone.runOutsideAngular((() => {
-        const element = this._primaryValueBar.nativeElement;
-
-        this._animationEndSubscription =
-            (fromEvent(element, 'transitionend') as Observable<TransitionEvent>)
-              .pipe(filter(((e: TransitionEvent) => e.target === element)))
-              .subscribe(() => this._ngZone.run(() => this._emitAnimationEnd()));
-      }));
-    }
+    // Run outside angular so change detection didn't get triggered on every transition end
+    // instead only on the animation that we care about (primary value bar's transitionend)
+    this._ngZone.runOutsideAngular((() => {
+      const element = this._primaryValueBar.nativeElement;
+
+      this._animationEndSubscription =
+        (fromEvent(element, 'transitionend') as Observable<TransitionEvent>)
+          .pipe(filter(((e: TransitionEvent) => e.target === element)))
+          .subscribe(() => {
+            if (this.mode === 'determinate' || this.mode === 'buffer') {
+              this._ngZone.run(() => this.animationEnd.next({value: this.value}));
+            }
+          });
+    }));
   }
 
   ngOnDestroy() {
     this._animationEndSubscription.unsubscribe();
   }
 
-  /** Emit an animationEnd event if in determinate or buffer mode. */
-  private _emitAnimationEnd(): void {
-    if (this.mode === 'determinate' || this.mode === 'buffer') {
-      this.animationEnd.next({value: this.value});
-    }
-  }
-
   static ngAcceptInputType_value: NumberInput;
 }