fix(material-experimental/mdc-chips): avoid unnecessary change detections

Avoids running the `transitionend` inside the `NgZone` for the MDC-based `mat-chip` since it fires a lot and it doesn't need to trigger change detection.

Author: crisbeto

src/material-experimental/mdc-chips/chip.ts

@@ -19,7 +19,6 @@ import {
   Directive,
   ElementRef,
   EventEmitter,
-  HostListener,
   Inject,
   Input,
   NgZone,
@@ -142,13 +141,11 @@ export class MatChip extends _MatChipMixinBase implements AfterContentInit, Afte
     /** Whether animations for the chip are enabled. */
   _animationsDisabled: boolean;
 
-  // We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
-  // In Ivy the `host` bindings will be merged when this class is extended, whereas in
-  // ViewEngine they're overwritten.
-  // TODO(mmalerba): we move this back into `host` once Ivy is turned on by default.
-  // tslint:disable-next-line:no-host-decorator-in-concrete
-  @HostListener('transitionend', ['$event'])
-  _handleTransitionEnd(event: TransitionEvent) {
+  /**
+   * Event listener for `transitionend` events. Needs to be an arrow
+   * function so we can pass it easily into `addEventListener`.
+   */
+  private _handleTransitionEnd = (event: TransitionEvent) => {
     this._chipFoundation.handleTransitionEnd(event);
   }
 
@@ -312,7 +309,7 @@ export class MatChip extends _MatChipMixinBase implements AfterContentInit, Afte
 
  constructor(
     public _changeDetectorRef: ChangeDetectorRef,
-    readonly _elementRef: ElementRef,
+    readonly _elementRef: ElementRef<HTMLElement>,
     protected _ngZone: NgZone,
     @Optional() private _dir: Directionality,
     // @breaking-change 8.0.0 `animationMode` parameter to become required.
@@ -322,6 +319,10 @@ export class MatChip extends _MatChipMixinBase implements AfterContentInit, Afte
     this._animationsDisabled = animationMode === 'NoopAnimations';
     this._isBasicChip = _elementRef.nativeElement.hasAttribute(this.basicChipAttrName) ||
                         _elementRef.nativeElement.tagName.toLowerCase() === this.basicChipAttrName;
+
+    _ngZone.runOutsideAngular(() => {
+      _elementRef.nativeElement.addEventListener('transitionend', this._handleTransitionEnd);
+    });
   }
 
   ngAfterContentInit() {
@@ -330,13 +331,15 @@ export class MatChip extends _MatChipMixinBase implements AfterContentInit, Afte
 
   ngAfterViewInit() {
     this._chipFoundation.init();
-    this._textElement = this._elementRef.nativeElement.querySelector('.mdc-chip__text');
+    this._textElement =
+        this._elementRef.nativeElement.querySelector('.mdc-chip__text') as HTMLElement;
   }
 
   ngOnDestroy() {
     this.destroyed.emit({chip: this});
     this._destroyed.next();
     this._destroyed.complete();
+    this._elementRef.nativeElement.removeEventListener('transitionend', this._handleTransitionEnd);
     this._chipFoundation.destroy();
   }