diff --git a/src/lib/sidenav/drawer.ts b/src/lib/sidenav/drawer.ts
index ef30ccbb48a..9acdc6b4bc9 100644
--- a/src/lib/sidenav/drawer.ts
+++ b/src/lib/sidenav/drawer.ts
@@ -35,6 +35,7 @@ import {
   QueryList,
   ViewChild,
   ViewEncapsulation,
+  HostListener,
 } from '@angular/core';
 import {fromEvent, merge, Observable, Subject} from 'rxjs';
 import {
@@ -116,8 +117,6 @@ export class MatDrawerContent extends CdkScrollable implements AfterContentInit
   host: {
     'class': 'mat-drawer',
     '[@transform]': '_animationState',
-    '(@transform.start)': '_animationStarted.next($event)',
-    '(@transform.done)': '_animationEnd.next($event)',
     // must prevent the browser from aligning text based on value
     '[attr.align]': 'null',
     '[class.mat-drawer-end]': 'position === "end"',
@@ -404,6 +403,26 @@ export class MatDrawer implements AfterContentInit, AfterContentChecked, OnDestr
   get _width(): number {
     return this._elementRef.nativeElement ? (this._elementRef.nativeElement.offsetWidth || 0) : 0;
   }
+
+  // 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 overwritte.
+  // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default.
+  // tslint:disable-next-line:no-host-decorator-in-concrete
+  @HostListener('@transform.start', ['$event'])
+  _animationStartListener(event: AnimationEvent) {
+    this._animationStarted.next(event);
+  }
+
+  // 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 overwritte.
+  // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default.
+  // tslint:disable-next-line:no-host-decorator-in-concrete
+  @HostListener('@transform.done', ['$event'])
+  _animationDoneListener(event: AnimationEvent) {
+    this._animationEnd.next(event);
+  }
 }
 
 
diff --git a/src/lib/sidenav/sidenav.ts b/src/lib/sidenav/sidenav.ts
index 417f3ef5a50..3e2d72e3ec6 100644
--- a/src/lib/sidenav/sidenav.ts
+++ b/src/lib/sidenav/sidenav.ts
@@ -60,8 +60,6 @@ export class MatSidenavContent extends MatDrawerContent {
     'class': 'mat-drawer mat-sidenav',
     'tabIndex': '-1',
     '[@transform]': '_animationState',
-    '(@transform.start)': '_animationStarted.next($event)',
-    '(@transform.done)': '_animationEnd.next($event)',
     // must prevent the browser from aligning text based on value
     '[attr.align]': 'null',
     '[class.mat-drawer-end]': 'position === "end"',
diff --git a/tools/public_api_guard/lib/sidenav.d.ts b/tools/public_api_guard/lib/sidenav.d.ts
index dd70feca97d..da5b70d7ce4 100644
--- a/tools/public_api_guard/lib/sidenav.d.ts
+++ b/tools/public_api_guard/lib/sidenav.d.ts
@@ -21,6 +21,8 @@ export declare class MatDrawer implements AfterContentInit, AfterContentChecked,
     readonly openedStart: Observable<void>;
     position: 'start' | 'end';
     constructor(_elementRef: ElementRef<HTMLElement>, _focusTrapFactory: FocusTrapFactory, _focusMonitor: FocusMonitor, _platform: Platform, _ngZone: NgZone, _doc: any);
+    _animationDoneListener(event: AnimationEvent): void;
+    _animationStartListener(event: AnimationEvent): void;
     close(): Promise<MatDrawerToggleResult>;
     ngAfterContentChecked(): void;
     ngAfterContentInit(): void;