feat(drawer): allow for backdrop to be disabled (#9381)

Adds the `hasBackdrop` input to the drawer container, allowing users to disable the backdrop.

Fixes #5300.

Author: crisbeto

src/lib/sidenav/drawer-container.html

@@ -1,4 +1,4 @@
-<div class="mat-drawer-backdrop" (click)="_onBackdropClicked()"
+<div class="mat-drawer-backdrop" (click)="_onBackdropClicked()" *ngIf="hasBackdrop"
      [class.mat-drawer-shown]="_isShowingBackdrop()"></div>
 
 <ng-content select="mat-drawer"></ng-content>

src/lib/sidenav/drawer.spec.ts

@@ -483,6 +483,7 @@ describe('MatDrawerContainer', () => {
         DrawerSetToOpenedTrue,
         DrawerContainerStateChangesTestApp,
         AutosizeDrawer,
+        BasicTestApp,
       ],
     });
 
@@ -630,6 +631,18 @@ describe('MatDrawerContainer', () => {
       discardPeriodicTasks();
     }));
 
+    it('should be able to toggle whether the container has a backdrop', fakeAsync(() => {
+      const fixture = TestBed.createComponent(BasicTestApp);
+      fixture.detectChanges();
+
+      expect(fixture.nativeElement.querySelector('.mat-drawer-backdrop')).toBeTruthy();
+
+      fixture.componentInstance.hasBackdrop = false;
+      fixture.detectChanges();
+
+      expect(fixture.nativeElement.querySelector('.mat-drawer-backdrop')).toBeFalsy();
+    }));
+
 });
 
 
@@ -652,13 +665,13 @@ class DrawerContainerTwoDrawerTestApp {
 /** Test component that contains an MatDrawerContainer and one MatDrawer. */
 @Component({
   template: `
-    <mat-drawer-container (backdropClick)="backdropClicked()">
+    <mat-drawer-container (backdropClick)="backdropClicked()" [hasBackdrop]="hasBackdrop">
       <mat-drawer #drawer position="start"
                  (opened)="open()"
                  (openedStart)="openStart()"
                  (closed)="close()"
                  (closedStart)="closeStart()">
-        <button #drawerButton>Content.</button>
+        <button #drawerButton>Content</button>
       </mat-drawer>
       <button (click)="drawer.open()" class="open" #openButton></button>
       <button (click)="drawer.close()" class="close" #closeButton></button>
@@ -670,6 +683,7 @@ class BasicTestApp {
   closeCount = 0;
   closeStartCount = 0;
   backdropClickedCount = 0;
+  hasBackdrop = true;
 
   @ViewChild('drawerButton') drawerButton: ElementRef;
   @ViewChild('openButton') openButton: ElementRef;

src/lib/sidenav/drawer.ts

@@ -454,6 +454,20 @@ export class MatDrawerContainer implements AfterContentInit, OnDestroy {
   set autosize(value: boolean) { this._autosize = coerceBooleanProperty(value); }
   private _autosize: boolean;
 
+  /** Whether the drawer container should have a backdrop while one of the sidenavs is open. */
+  @Input()
+  get hasBackdrop() {
+    if (this._hasBackdrop == null) {
+      return !this._start || this._start.mode !== 'side' || !this._end || this._end.mode !== 'side';
+    }
+
+    return this._hasBackdrop;
+  }
+  set hasBackdrop(value: any) {
+    this._hasBackdrop = value == null ? null : coerceBooleanProperty(value);
+  }
+  private _hasBackdrop: boolean | null;
+
   /** Event emitted when the drawer backdrop is clicked. */
   @Output() readonly backdropClick: EventEmitter<void> = new EventEmitter<void>();
 

src/lib/sidenav/sidenav-container.html

@@ -1,4 +1,4 @@
-<div class="mat-drawer-backdrop" (click)="_onBackdropClicked()"
+<div class="mat-drawer-backdrop" (click)="_onBackdropClicked()" *ngIf="hasBackdrop"
      [class.mat-drawer-shown]="_isShowingBackdrop()"></div>
 
 <ng-content select="mat-sidenav"></ng-content>