fix(example-app): Sidenav closes with Esc #1244
Conversation
* This dispatches `CloseSidenav` on closedStart event IMPORTANT: This does not work properly! After unfocusing the sidenav, the element cannot be closed with `escape` again, at least on the login screen. On other screens it's not working at all.
* (keydown.escape) explicitly trigers `close` on mat-sidenav This fixes the behaviour that the sidenav cannot be closed with `escape` after unfocusing.
mgred
changed the title
| constructor(private store: Store<fromRoot.State>) {} | ||
|
|
||
| closeSidenav() { | ||
| this.store.dispatch(new LayoutActions.CloseSidenav()); |
There was a problem hiding this comment.
Following the dump/smart component convention we can't dispatch inside this pure component,
we have to use an @Output property to emit the close event to the container page located at example-app/app/core/containers/app.component.
There was a problem hiding this comment.
Thanks @timdeschryver, I will change this according to your suggestions.
dump/smart component convention, now dispatching the closing action in the containter component (app.component) See: ngrx#1172
|
|
||
| @Component({ | ||
| selector: 'bc-sidenav', | ||
| template: ` | ||
| <mat-sidenav [opened]="open"> | ||
| <mat-sidenav #sidenav [opened]="open" (keydown.escape)="sidenav.close()" (closedStart)="closeMenu.emit()" disabelClose> |
There was a problem hiding this comment.
disabelClose -> disableClose
There was a problem hiding this comment.
Why not just call closeSidenav.emit() on both events?
There was a problem hiding this comment.
disabelClose -> disableClose
fixed this typo
Why not just call
closeSidenav.emit()on both events?
I think this does not work, because we have to explicitly call the "closing" event of the menu when escape was pressed on the focused element. Otherwise it would never close since disableClose is set.
| @@ -19,4 +19,5 @@ import { Component, Input } from '@angular/core'; | |||
| }) | |||
| export class SidenavComponent { | |||
| @Input() open = false; | |||
| @Output() closeMenu = new EventEmitter(); | |||
There was a problem hiding this comment.
closeMenu -> closeSidenav
There was a problem hiding this comment.
@brandonroberts, I named this according to the "opening" event defined in toolbar.component which is called openMenu.
In app.component:
<bc-toolbar (openMenu)="openSidenav()">
...
</bc-toolbar>
|
Thanks @mgred! |
See: #1172