diff --git a/src/lib/sidenav/drawer-container.html b/src/lib/sidenav/drawer-container.html
index c674a0cfe98a..4791878555ef 100644
--- a/src/lib/sidenav/drawer-container.html
+++ b/src/lib/sidenav/drawer-container.html
@@ -1,4 +1,4 @@
-
diff --git a/src/lib/sidenav/drawer.spec.ts b/src/lib/sidenav/drawer.spec.ts
index b84afe17ed25..67ac8d3fe570 100644
--- a/src/lib/sidenav/drawer.spec.ts
+++ b/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: `
-
+
-
+
@@ -670,6 +683,7 @@ class BasicTestApp {
closeCount = 0;
closeStartCount = 0;
backdropClickedCount = 0;
+ hasBackdrop = true;
@ViewChild('drawerButton') drawerButton: ElementRef;
@ViewChild('openButton') openButton: ElementRef;
diff --git a/src/lib/sidenav/drawer.ts b/src/lib/sidenav/drawer.ts
index 3ecade5adad6..e681d0e13dc9 100644
--- a/src/lib/sidenav/drawer.ts
+++ b/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 = new EventEmitter();
diff --git a/src/lib/sidenav/sidenav-container.html b/src/lib/sidenav/sidenav-container.html
index a54bd1485414..19d4a7fb52e9 100644
--- a/src/lib/sidenav/sidenav-container.html
+++ b/src/lib/sidenav/sidenav-container.html
@@ -1,4 +1,4 @@
-