fix(drawer): drawer container not reacting to drawer removal (#7060)

Fixes the drawer container not reacting if one of the drawers is destroyed.

Fixes #6271.

Author: crisbeto

src/lib/sidenav/drawer.spec.ts

@@ -323,7 +323,11 @@ describe('MatDrawerContainer', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [MatSidenavModule, A11yModule, PlatformModule, NoopAnimationsModule],
-      declarations: [DrawerContainerTwoDrawerTestApp, DrawerDelayed],
+      declarations: [
+        DrawerContainerTwoDrawerTestApp,
+        DrawerDelayed,
+        DrawerContainerStateChangesTestApp,
+      ],
     });
 
     TestBed.compileComponents();
@@ -372,6 +376,47 @@ describe('MatDrawerContainer', () => {
 
     expect(parseInt(contentElement.style.marginLeft)).toBeGreaterThan(0);
   }));
+
+  it('should recalculate the margin if a drawer is destroyed', fakeAsync(() => {
+    const fixture = TestBed.createComponent(DrawerContainerStateChangesTestApp);
+
+    fixture.detectChanges();
+    fixture.componentInstance.drawer.open();
+    fixture.detectChanges();
+    tick();
+    fixture.detectChanges();
+
+    const contentElement = fixture.debugElement.nativeElement.querySelector('.mat-drawer-content');
+    const initialMargin = parseInt(contentElement.style.marginLeft);
+
+    expect(initialMargin).toBeGreaterThan(0);
+
+    fixture.componentInstance.renderDrawer = false;
+    fixture.detectChanges();
+
+    expect(parseInt(contentElement.style.marginLeft)).toBeLessThan(initialMargin);
+  }));
+
+  it('should recalculate the margin if the drawer mode is changed', fakeAsync(() => {
+    const fixture = TestBed.createComponent(DrawerContainerStateChangesTestApp);
+
+    fixture.detectChanges();
+    fixture.componentInstance.drawer.open();
+    fixture.detectChanges();
+    tick();
+    fixture.detectChanges();
+
+    const contentElement = fixture.debugElement.nativeElement.querySelector('.mat-drawer-content');
+    const initialMargin = parseInt(contentElement.style.marginLeft);
+
+    expect(initialMargin).toBeGreaterThan(0);
+
+    fixture.componentInstance.mode = 'over';
+    fixture.detectChanges();
+
+    expect(parseInt(contentElement.style.marginLeft)).toBeLessThan(initialMargin);
+  }));
+
 });
 
 
@@ -485,3 +530,19 @@ class DrawerDelayed {
   @ViewChild(MatDrawer) drawer: MatDrawer;
   showDrawer = false;
 }
+
+
+@Component({
+  template: `
+    <mat-drawer-container>
+      <mat-drawer *ngIf="renderDrawer" [mode]="mode"></mat-drawer>
+    </mat-drawer-container>`,
+})
+class DrawerContainerStateChangesTestApp {
+  @ViewChild(MatDrawer) drawer: MatDrawer;
+  @ViewChild(MatDrawerContainer) drawerContainer: MatDrawerContainer;
+
+  mode = 'side';
+  renderDrawer = true;
+}
+

src/lib/sidenav/drawer.ts

@@ -398,8 +398,8 @@ export class MatDrawerContainer implements AfterContentInit, OnDestroy {
   private _left: MatDrawer | null;
   private _right: MatDrawer | null;
 
-  /** Subscription to the Directionality change EventEmitter. */
-  private _dirChangeSubscription = Subscription.EMPTY;
+  /** Emits when the component is destroyed. */
+  private _destroyed = new Subject<void>();
 
   _contentMargins = new Subject<{left: number, right: number}>();
 
@@ -409,23 +409,33 @@ export class MatDrawerContainer implements AfterContentInit, OnDestroy {
     // If a `Dir` directive exists up the tree, listen direction changes and update the left/right
     // properties to point to the proper start/end.
     if (_dir != null) {
-      this._dirChangeSubscription = _dir.change.subscribe(() => this._validateDrawers());
+      takeUntil.call(_dir.change, this._destroyed).subscribe(() => this._validateDrawers());
     }
   }
 
   ngAfterContentInit() {
     startWith.call(this._drawers.changes, null).subscribe(() => {
       this._validateDrawers();
+
       this._drawers.forEach((drawer: MatDrawer) => {
         this._watchDrawerToggle(drawer);
         this._watchDrawerPosition(drawer);
         this._watchDrawerMode(drawer);
       });
+
+      if (!this._drawers.length ||
+          this._isDrawerOpen(this._start) ||
+          this._isDrawerOpen(this._end)) {
+        this._updateContentMargins();
+      }
+
+      this._changeDetectorRef.markForCheck();
     });
   }
 
   ngOnDestroy() {
-    this._dirChangeSubscription.unsubscribe();
+    this._destroyed.next();
+    this._destroyed.complete();
   }
 
   /** Calls `open` of both start and end drawers */
@@ -478,10 +488,11 @@ export class MatDrawerContainer implements AfterContentInit, OnDestroy {
   /** Subscribes to changes in drawer mode so we can run change detection. */
   private _watchDrawerMode(drawer: MatDrawer): void {
     if (drawer) {
-      takeUntil.call(drawer._modeChanged, this._drawers.changes).subscribe(() => {
-        this._updateContentMargins();
-        this._changeDetectorRef.markForCheck();
-      });
+      takeUntil.call(drawer._modeChanged, merge(this._drawers.changes, this._destroyed))
+        .subscribe(() => {
+          this._updateContentMargins();
+          this._changeDetectorRef.markForCheck();
+        });
     }
   }