skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(nav-schematics): Subscribe to breakpoint observable (#11310)

Browse Source 
* fix(nav-schematics): Subscribe to handset for role in nav schematic.

Otherwise, we are only checking if the observable is defined rather
than actually checking the breakpoint.

* style(nav-schematics): Suffix observable with '$'

This follow the Google guidelines for naming observables.

* style(nav-schematics): Map breakpoint observer result to matches property
This commit is contained in:
Ingo Bürk
2018-05-16 19:38:00 +02:00
committed by tinayuangao
parent f5377ddd73
commit d52acc9918
2 changed files with 17 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html
+4 -4
View File
@@ -3,9 +3,9 @@
#drawer
class="sidenav"
fixedInViewport="true"
[attr.role]="isHandset ? 'dialog' : 'navigation'"
[mode]="(isHandset | async)!.matches ? 'over' : 'side'"
[opened]="!(isHandset | async)!.matches">
[attr.role]="isHandset$ | async ? 'dialog' : 'navigation'"
[mode]="isHandset$ | async ? 'over' : 'side'"
[opened]="!(isHandset$ | async)">
<mat-toolbar color="primary">Menu</mat-toolbar>
<mat-nav-list>
<a mat-list-item href="#">Link 1</a>
@@ -20,7 +20,7 @@
aria-label="Toggle sidenav"
mat-icon-button
(click)="drawer.toggle()"
*ngIf="(isHandset | async)!.matches">
*ngIf="isHandset$ | async">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>
<span>Application Title</span>
src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts
+13 -6
View File
@@ -1,6 +1,7 @@
import { Component<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%><% if(changeDetection !== 'Default') { %>, ChangeDetectionStrategy<% }%> } from '@angular/core';
import { BreakpointObserver, Breakpoints, BreakpointState } from '@angular/cdk/layout';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
@Component({
selector: '<%= selector %>',<% if(inlineTemplate) { %>
@@ -10,9 +11,9 @@ import { Observable } from 'rxjs';
#drawer
class="sidenav"
fixedInViewport="true"
[attr.role]="isHandset ? 'dialog' : 'navigation'"
[mode]="(isHandset | async)!.matches ? 'over' : 'side'"
[opened]="!(isHandset | async)!.matches">
[attr.role]="isHandset$ | async ? 'dialog' : 'navigation'"
[mode]="isHandset$ | async ? 'over' : 'side'"
[opened]="!(isHandset$ | async)">
<mat-toolbar color="primary">Menu</mat-toolbar>
<mat-nav-list>
<a mat-list-item href="#">Link 1</a>
@@ -27,7 +28,7 @@ import { Observable } from 'rxjs';
aria-label="Toggle sidenav"
mat-icon-button
(click)="drawer.toggle()"
*ngIf="(isHandset | async)!.matches">
*ngIf="isHandset$ | async">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>
<span>Application Title</span>
@@ -53,6 +54,12 @@ import { Observable } from 'rxjs';
changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %>
})
export class <%= classify(name) %>Component {
isHandset: Observable<BreakpointState> = this.breakpointObserver.observe(Breakpoints.Handset);
isHandset$: Observable<BreakpointState> = this.breakpointObserver.observe(Breakpoints.Handset)
.pipe(
map(result => result.matches)
);
constructor(private breakpointObserver: BreakpointObserver) {}
}
}