fix(drawer): avoid initial animation when rendering on the server (#8828)

Prevents drawers that are open by default from animating on init if they're rendered on the server.

Fixes #6865.

Author: crisbeto

src/lib/sidenav/drawer.ts

@@ -10,7 +10,9 @@ import {FocusTrap, FocusTrapFactory, FocusMonitor, FocusOrigin} from '@angular/c
 import {Directionality} from '@angular/cdk/bidi';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {ESCAPE} from '@angular/cdk/keycodes';
+import {Platform} from '@angular/cdk/platform';
 import {
+  AfterContentChecked,
   AfterContentInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -139,7 +141,7 @@ export class MatDrawerContent implements AfterContentInit {
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
 })
-export class MatDrawer implements AfterContentInit, OnDestroy {
+export class MatDrawer implements AfterContentInit, AfterContentChecked, OnDestroy {
   private _focusTrap: FocusTrap;
   private _elementFocusedBeforeDrawerWasOpened: HTMLElement | null = null;
 
@@ -257,6 +259,7 @@ export class MatDrawer implements AfterContentInit, OnDestroy {
   constructor(private _elementRef: ElementRef,
               private _focusTrapFactory: FocusTrapFactory,
               private _focusMonitor: FocusMonitor,
+              private _platform: Platform,
               @Optional() @Inject(DOCUMENT) private _doc: any) {
     this.openedChange.subscribe((opened: boolean) => {
       if (opened) {
@@ -295,7 +298,16 @@ export class MatDrawer implements AfterContentInit, OnDestroy {
   ngAfterContentInit() {
     this._focusTrap = this._focusTrapFactory.create(this._elementRef.nativeElement);
     this._focusTrap.enabled = this._isFocusTrapEnabled;
-    this._enableAnimations = true;
+  }
+
+  ngAfterContentChecked() {
+    // Enable the animations after the lifecycle hooks have run, in order to avoid animating
+    // drawers that are open by default. When we're on the server, we shouldn't enable the
+    // animations, because we don't want the drawer to animate the first time the user sees
+    // the page.
+    if (this._platform.isBrowser) {
+      this._enableAnimations = true;
+    }
   }
 
   ngOnDestroy() {

src/lib/sidenav/sidenav-module.ts

@@ -12,6 +12,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatCommonModule} from '@angular/material/core';
 import {ScrollDispatchModule} from '@angular/cdk/scrolling';
+import {PlatformModule} from '@angular/cdk/platform';
 import {MatSidenav, MatSidenavContainer, MatSidenavContent} from './sidenav';
 import {
   MatDrawer,
@@ -28,6 +29,7 @@ import {
     A11yModule,
     OverlayModule,
     ScrollDispatchModule,
+    PlatformModule,
   ],
   exports: [
     MatCommonModule,