diff --git a/src/cdk/layout/breakpoints-observer.ts b/src/cdk/layout/breakpoints-observer.ts
index a7cab7f42bd..908cbfef707 100644
--- a/src/cdk/layout/breakpoints-observer.ts
+++ b/src/cdk/layout/breakpoints-observer.ts
@@ -116,9 +116,9 @@ export class BreakpointObserver implements OnDestroy {
       },
       () => mql.removeListener(queryListener))
       .pipe(
-        takeUntil(this._destroySubject),
         startWith(mql),
-        map((nextMql: MediaQueryList) => ({query, matches: nextMql.matches}))
+        map((nextMql: MediaQueryList) => ({query, matches: nextMql.matches})),
+        takeUntil(this._destroySubject)
       );
 
     // Add the MediaQueryList to the set of queries.
diff --git a/src/lib/sidenav/drawer.ts b/src/lib/sidenav/drawer.ts
index 33744175f88..c8caa612564 100644
--- a/src/lib/sidenav/drawer.ts
+++ b/src/lib/sidenav/drawer.ts
@@ -572,8 +572,8 @@ export class MatDrawerContainer implements AfterContentInit, DoCheck, OnDestroy
    */
   private _watchDrawerToggle(drawer: MatDrawer): void {
     drawer._animationStarted.pipe(
+      filter((event: AnimationEvent) => event.fromState !== event.toState),
       takeUntil(this._drawers.changes),
-      filter((event: AnimationEvent) => event.fromState !== event.toState)
     )
     .subscribe((event: AnimationEvent) => {
       // Set the transition class on the container so that the animations occur. This should not