Skip to content

Commit 79306ad

Browse files
EladBezalelmmalerba
authored andcommitted
feat(sidenav): open all sidenavs from MdSidenavContainer (#2870)
- added `open` and `close` functions that applies to both sidenavs in the container and resolves when both are finished fixes #2591
1 parent fb7947f commit 79306ad

File tree

2 files changed

+55
-7
lines changed

2 files changed

+55
-7
lines changed

src/lib/sidenav/sidenav.spec.ts

Lines changed: 45 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import {fakeAsync, async, tick, ComponentFixture, TestBed} from '@angular/core/testing';
2-
import {Component} from '@angular/core';
2+
import {Component, ViewChild} from '@angular/core';
33
import {By} from '@angular/platform-browser';
4-
import {MdSidenav, MdSidenavModule, MdSidenavToggleResult} from './index';
4+
import {MdSidenav, MdSidenavModule, MdSidenavToggleResult, MdSidenavContainer} from './index';
55
import {A11yModule} from '../core/a11y/index';
66
import {PlatformModule} from '../core/platform/index';
77
import {ESCAPE} from '../core/keyboard/keycodes';
88

9-
109
function endSidenavTransition(fixture: ComponentFixture<any>) {
1110
let sidenav: any = fixture.debugElement.query(By.directive(MdSidenav)).componentInstance;
1211
sidenav._onTransitionEnd(<any> {
@@ -23,7 +22,6 @@ describe('MdSidenav', () => {
2322
imports: [MdSidenavModule.forRoot(), A11yModule.forRoot(), PlatformModule.forRoot()],
2423
declarations: [
2524
BasicTestApp,
26-
SidenavContainerTwoSidenavTestApp,
2725
SidenavContainerNoSidenavTestApp,
2826
SidenavSetToOpenedFalse,
2927
SidenavSetToOpenedTrue,
@@ -446,6 +444,43 @@ describe('MdSidenav', () => {
446444
});
447445
});
448446

447+
describe('MdSidenavContainer', () => {
448+
beforeEach(async(() => {
449+
TestBed.configureTestingModule({
450+
imports: [MdSidenavModule.forRoot(), A11yModule.forRoot(), PlatformModule.forRoot()],
451+
declarations: [
452+
SidenavContainerTwoSidenavTestApp
453+
],
454+
});
455+
456+
TestBed.compileComponents();
457+
}));
458+
459+
describe('methods', () => {
460+
it('should be able to open and close', async(() => {
461+
const fixture = TestBed.createComponent(SidenavContainerTwoSidenavTestApp);
462+
463+
fixture.detectChanges();
464+
465+
const testComponent: SidenavContainerTwoSidenavTestApp =
466+
fixture.debugElement.componentInstance;
467+
const sidenavs = fixture.debugElement.queryAll(By.directive(MdSidenav));
468+
469+
expect(sidenavs.every(sidenav => sidenav.componentInstance.opened)).toBeFalsy();
470+
471+
return testComponent.sidenavContainer.open()
472+
.then(() => {
473+
expect(sidenavs.every(sidenav => sidenav.componentInstance.opened)).toBeTruthy();
474+
475+
return testComponent.sidenavContainer.close();
476+
})
477+
.then(() => {
478+
expect(sidenavs.every(sidenav => sidenav.componentInstance.opened)).toBeTruthy();
479+
});
480+
}));
481+
});
482+
});
483+
449484

450485
/** Test component that contains an MdSidenavContainer but no MdSidenav. */
451486
@Component({template: `<md-sidenav-container></md-sidenav-container>`})
@@ -455,11 +490,14 @@ class SidenavContainerNoSidenavTestApp { }
455490
@Component({
456491
template: `
457492
<md-sidenav-container>
458-
<md-sidenav> </md-sidenav>
459-
<md-sidenav> </md-sidenav>
493+
<md-sidenav align="start"> </md-sidenav>
494+
<md-sidenav align="end"> </md-sidenav>
460495
</md-sidenav-container>`,
461496
})
462-
class SidenavContainerTwoSidenavTestApp { }
497+
class SidenavContainerTwoSidenavTestApp {
498+
@ViewChild(MdSidenavContainer)
499+
sidenavContainer: MdSidenavContainer;
500+
}
463501

464502
/** Test component that contains an MdSidenavContainer and one MdSidenav. */
465503
@Component({

src/lib/sidenav/sidenav.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -371,6 +371,16 @@ export class MdSidenavContainer implements AfterContentInit {
371371
this._ngZone.onMicrotaskEmpty.first().subscribe(() => this._enableTransitions = true);
372372
}
373373

374+
/** Calls `open` of both start and end sidenavs */
375+
public open() {
376+
return Promise.all([this._start, this._end].map(sidenav => sidenav && sidenav.open()));
377+
}
378+
379+
/** Calls `close` of both start and end sidenavs */
380+
public close() {
381+
return Promise.all([this._start, this._end].map(sidenav => sidenav && sidenav.close()));
382+
}
383+
374384
/**
375385
* Subscribes to sidenav events in order to set a class on the main container element when the
376386
* sidenav is open and the backdrop is visible. This ensures any overflow on the container element

0 commit comments

Comments
 (0)