From 510c055f484b6b6401c194261ebc6187619c470c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ingo=20B=C3=BCrk?= Date: Sun, 13 May 2018 20:13:08 +0200 Subject: [PATCH 1/3] 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. --- .../__name@dasherize__.component.html | 2 +- .../__name@dasherize@if-flat__/__name@dasherize__.component.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html b/src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html index f71b7e702e9b..83e1e9fdce7a 100644 --- a/src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html +++ b/src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html @@ -3,7 +3,7 @@ #drawer class="sidenav" fixedInViewport="true" - [attr.role]="isHandset ? 'dialog' : 'navigation'" + [attr.role]="(isHandset | async)!.matches ? 'dialog' : 'navigation'" [mode]="(isHandset | async)!.matches ? 'over' : 'side'" [opened]="!(isHandset | async)!.matches"> Menu diff --git a/src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts b/src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts index a39f2aa3af0f..3be24fd49e02 100644 --- a/src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts +++ b/src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts @@ -10,7 +10,7 @@ import { Observable } from 'rxjs'; #drawer class="sidenav" fixedInViewport="true" - [attr.role]="isHandset ? 'dialog' : 'navigation'" + [attr.role]="(isHandset | async)!.matches ? 'dialog' : 'navigation'" [mode]="(isHandset | async)!.matches ? 'over' : 'side'" [opened]="!(isHandset | async)!.matches"> Menu From ec478917becb0a28b3a9b8d9a93dd7e3631ae42c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ingo=20B=C3=BCrk?= Date: Sun, 13 May 2018 20:16:56 +0200 Subject: [PATCH 2/3] style(nav-schematics): Suffix observable with '$' This follow the Google guidelines for naming observables. --- .../__name@dasherize__.component.html | 8 ++++---- .../__name@dasherize__.component.ts | 10 +++++----- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html b/src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html index 83e1e9fdce7a..e2d83b373aac 100644 --- a/src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html +++ b/src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html @@ -3,9 +3,9 @@ #drawer class="sidenav" fixedInViewport="true" - [attr.role]="(isHandset | async)!.matches ? 'dialog' : 'navigation'" - [mode]="(isHandset | async)!.matches ? 'over' : 'side'" - [opened]="!(isHandset | async)!.matches"> + [attr.role]="(isHandset$ | async)!.matches ? 'dialog' : 'navigation'" + [mode]="(isHandset$ | async)!.matches ? 'over' : 'side'" + [opened]="!(isHandset$ | async)!.matches"> Menu Link 1 @@ -20,7 +20,7 @@ aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()" - *ngIf="(isHandset | async)!.matches"> + *ngIf="(isHandset$ | async)!.matches"> menu Application Title diff --git a/src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts b/src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts index 3be24fd49e02..5dfc9a027c44 100644 --- a/src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts +++ b/src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts @@ -10,9 +10,9 @@ import { Observable } from 'rxjs'; #drawer class="sidenav" fixedInViewport="true" - [attr.role]="(isHandset | async)!.matches ? 'dialog' : 'navigation'" - [mode]="(isHandset | async)!.matches ? 'over' : 'side'" - [opened]="!(isHandset | async)!.matches"> + [attr.role]="(isHandset$ | async)!.matches ? 'dialog' : 'navigation'" + [mode]="(isHandset$ | async)!.matches ? 'over' : 'side'" + [opened]="!(isHandset$ | async)!.matches"> Menu Link 1 @@ -27,7 +27,7 @@ import { Observable } from 'rxjs'; aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()" - *ngIf="(isHandset | async)!.matches"> + *ngIf="(isHandset$ | async)!.matches"> menu Application Title @@ -53,6 +53,6 @@ import { Observable } from 'rxjs'; changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %> }) export class <%= classify(name) %>Component { - isHandset: Observable = this.breakpointObserver.observe(Breakpoints.Handset); + isHandset$: Observable = this.breakpointObserver.observe(Breakpoints.Handset); constructor(private breakpointObserver: BreakpointObserver) {} } From 6b085b9c7d2b5250d984dfa5eb3ae6fb6f1d081b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ingo=20B=C3=BCrk?= Date: Mon, 14 May 2018 22:55:43 +0200 Subject: [PATCH 3/3] style(nav-schematics): Map breakpoint observer result to matches property --- .../__name@dasherize__.component.html | 8 ++++---- .../__name@dasherize__.component.ts | 19 +++++++++++++------ 2 files changed, 17 insertions(+), 10 deletions(-) diff --git a/src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html b/src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html index e2d83b373aac..f12c995e4f7c 100644 --- a/src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html +++ b/src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html @@ -3,9 +3,9 @@ #drawer class="sidenav" fixedInViewport="true" - [attr.role]="(isHandset$ | async)!.matches ? '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)"> Menu Link 1 @@ -20,7 +20,7 @@ aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()" - *ngIf="(isHandset$ | async)!.matches"> + *ngIf="isHandset$ | async"> menu Application Title diff --git a/src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts b/src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts index 5dfc9a027c44..b14541a89b6e 100644 --- a/src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts +++ b/src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts @@ -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$ | async)!.matches ? '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)"> Menu Link 1 @@ -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"> menu Application Title @@ -53,6 +54,12 @@ import { Observable } from 'rxjs'; changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %> }) export class <%= classify(name) %>Component { - isHandset$: Observable = this.breakpointObserver.observe(Breakpoints.Handset); + + isHandset$: Observable = this.breakpointObserver.observe(Breakpoints.Handset) + .pipe( + map(result => result.matches) + ); + constructor(private breakpointObserver: BreakpointObserver) {} -} + + }