refactor: clean up unsafe takeUntil usages (#14185)

Cleans up some usages of `takeUntil` which are unsafe, because they're not at the end of the operator chain.

Author: crisbeto

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.

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