Add CSS Transition end output on mat-progress-bar value animation

src/demo-app/progress-bar/progress-bar-demo.html

@@ -8,12 +8,14 @@ <h1>Determinate</h1>
 
 <div class="demo-progress-bar-controls">
   <span>Value: {{determinateProgressValue}}</span>
+  <br/>
+  <span>Last animation complete value: {{animationEndValue}}</span>
   <button mat-raised-button (click)="stepDeterminateProgressVal(10)">Increase</button>
   <button mat-raised-button (click)="stepDeterminateProgressVal(-10)">Decrease</button>
 </div>
 
 <div class="demo-progress-bar-container">
-  <mat-progress-bar mode="determinate" [value]="determinateProgressValue" [color]="color">
+  <mat-progress-bar mode="determinate" [value]="determinateProgressValue" [color]="color" (valueAnimationEnd)="logValue($event)">
   </mat-progress-bar>
 </div>
 

src/demo-app/progress-bar/progress-bar-demo.ts

@@ -20,6 +20,7 @@ import {Component} from '@angular/core';
 export class ProgressBarDemo {
   color: string = 'primary';
   determinateProgressValue: number = 30;
+  animationEndValue: number;
   bufferProgressValue: number = 30;
   bufferBufferValue: number = 40;
 
@@ -35,6 +36,10 @@ export class ProgressBarDemo {
     this.bufferBufferValue = this.clampValue(val + this.bufferBufferValue);
   }
 
+  logValue(val: number) {
+    this.animationEndValue = val;
+  }
+
   private clampValue(value: number) {
     return Math.max(0, Math.min(100, value));
   }

src/lib/progress-bar/progress-bar.html

@@ -11,5 +11,5 @@
   <rect [attr.fill]="_rectangleFillValue" width="100%" height="100%"/>
 </svg>
 <div class="mat-progress-bar-buffer mat-progress-bar-element" [ngStyle]="_bufferTransform()"></div>
-<div class="mat-progress-bar-primary mat-progress-bar-fill mat-progress-bar-element" [ngStyle]="_primaryTransform()"></div>
+<div class="mat-progress-bar-primary mat-progress-bar-fill mat-progress-bar-element" [ngStyle]="_primaryTransform()" #primaryValueBar></div>
 <div class="mat-progress-bar-secondary mat-progress-bar-fill mat-progress-bar-element"></div>

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

@@ -1,8 +1,10 @@
-import {TestBed, async, ComponentFixture} from '@angular/core/testing';
-import {Component} from '@angular/core';
+import {TestBed, async, ComponentFixture, fakeAsync, tick} from '@angular/core/testing';
+import {Component, DebugElement} from '@angular/core';
 import {By} from '@angular/platform-browser';
+import {dispatchFakeEvent} from '@angular/cdk/testing';
 import {Location} from '@angular/common';
 import {MatProgressBarModule} from './index';
+import { MatProgressBar } from './progress-bar';
 
 
 describe('MatProgressBar', () => {
@@ -118,6 +120,53 @@ describe('MatProgressBar', () => {
       expect(progressElement.componentInstance.mode).toBe('buffer');
     });
   });
+
+  describe('animation trigger on determinate setting', () => {
+    let fixture: ComponentFixture<BasicProgressBar>;
+    let progressComponent: MatProgressBar;
+    let primaryValueBar: DebugElement;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(BasicProgressBar);
+      fixture.detectChanges();
+
+      const progressElement = fixture.debugElement.query(By.css('mat-progress-bar'));
+      progressComponent = progressElement.componentInstance;
+      primaryValueBar = progressElement.query(By.css('.mat-progress-bar-primary'));
+    });
+
+    it('should trigger output event on primary value bar animation end', () => {
+      spyOn(progressComponent.valueAnimationEnd, "next");
+
+      progressComponent.value = 40;
+      dispatchFakeEvent(primaryValueBar.nativeElement, 'transitionend');
+      expect(progressComponent.valueAnimationEnd.next).toHaveBeenCalledWith(40);
+    });
+  });
+
+  describe('animation trigger on buffer setting', () => {
+    let fixture: ComponentFixture<BufferProgressBar>;
+    let progressComponent: MatProgressBar;
+    let primaryValueBar: DebugElement;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(BufferProgressBar);
+      fixture.detectChanges();
+
+      const progressElement = fixture.debugElement.query(By.css('mat-progress-bar'));
+      progressComponent = progressElement.componentInstance;
+      primaryValueBar = progressElement.query(By.css('.mat-progress-bar-primary'));
+    });
+
+    it('should trigger output event with value not bufferValue', () => {
+      spyOn(progressComponent.valueAnimationEnd, "next");
+
+      progressComponent.value = 40;
+      progressComponent.bufferValue = 70;
+      dispatchFakeEvent(primaryValueBar.nativeElement, 'transitionend');
+      expect(progressComponent.valueAnimationEnd.next).toHaveBeenCalledWith(40);
+    });
+  });
 });
 
 

src/lib/progress-bar/progress-bar.ts

@@ -11,10 +11,16 @@ import {
   ElementRef,
   Inject,
   Input,
+  Output,
+  EventEmitter,
   Optional,
-  ViewEncapsulation
+  ViewEncapsulation,
+  AfterViewInit,
+  ViewChild,
+  OnDestroy
 } from '@angular/core';
 import {Location} from '@angular/common';
+import {fromEvent, Subscription} from 'rxjs';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 import {CanColor, mixinColor} from '@angular/material/core';
 
@@ -54,7 +60,7 @@ let progressbarId = 0;
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
 })
-export class MatProgressBar extends _MatProgressBarMixinBase implements CanColor {
+export class MatProgressBar extends _MatProgressBarMixinBase implements CanColor, AfterViewInit, OnDestroy {
   constructor(public _elementRef: ElementRef,
               @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string,
               /**
@@ -82,6 +88,18 @@ export class MatProgressBar extends _MatProgressBarMixinBase implements CanColor
   set bufferValue(v: number) { this._bufferValue = clamp(v || 0); }
   private _bufferValue: number = 0;
 
+  @ViewChild("primaryValueBar") primaryValueBar: ElementRef;
+
+  /** 
+   * Event that indicates animation end on value bar. Currently only support determinate and buffer. 
+   * Also note, if multiple event update is thrown in quick succession the last event completion is 
+   * the one firing the output.
+   */
+  @Output() valueAnimationEnd = new EventEmitter<number>();
+
+  /** Reference to animation end subscription to be unsubscribed on destroy. */
+  private _valueAnimationSubscription: Subscription | null;
+
   /**
    * Mode of the progress bar.
    *
@@ -113,6 +131,21 @@ export class MatProgressBar extends _MatProgressBarMixinBase implements CanColor
       return {transform: `scaleX(${scale})`};
     }
   }
+
+  /** Attaches value bar element animation end listener. */
+  ngAfterViewInit() {
+    if(this.mode === 'determinate' || this.mode === 'buffer') {
+      this._valueAnimationSubscription = fromEvent(this.primaryValueBar.nativeElement, 'transitionend')
+                                          .subscribe(() => this.valueAnimationEnd.next(this.value));
+    }
+  }
+
+  /** Removes value bar element animation end listener. */
+  ngOnDestroy() {
+    if(this._valueAnimationSubscription) {
+      this._valueAnimationSubscription.unsubscribe();
+    }
+  }
 }
 
 /** Clamps a value to be between two numbers, by default 0 and 100. */