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 @@ -