ng generate @angular/material:material-nav template is broken

[filipesilva]

Moved from angular/angular-cli#10966 by @vzayko

---

Auto generated Material2 material-nav template is broken.

Versions

Angular CLI: 6.0.3
Node: 10.1.0
OS: win32 x64
Angular: 6.0.3
... animations, cli, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.3
@angular-devkit/build-angular     0.6.3
@angular-devkit/build-optimizer   0.6.3
@angular-devkit/core              0.6.3
@angular-devkit/schematics        0.6.3
@angular/cdk                      6.1.0
@angular/material                 6.1.0
@angular/pwa                      0.6.3
@ngtools/webpack                  6.0.3
@schematics/angular               0.6.3
@schematics/update                0.6.3
rxjs                              6.2.0
typescript                        2.7.2
webpack                           4.8.3

Windows 10 Pro, VS Code 1.23.1

Repro steps

• Create a Angular App using CLI
• Use the CLI to add Material2 support: ng add @angular/material
• Use the CLI to add material-nav component: ng generate @angular/material:material-nav --name MyNav

Observed behavior

1. Open my-nav.component.ts. Find the following block:

isHandset$: Observable<BreakpointState> = this.breakpointObserver.observe(Breakpoints.Handset)
    .pipe(
      map(result => result.matches)
    );

2. Open my-nav.component.html. Find the following lines:

[attr.role]="isHandset$ | async ? 'dialog' : 'navigation'"
[mode]="isHandset$ | async ? 'over' : 'side'"

Desired behavior

1. In the TS file isHandset$ shold have type of Observable<boolean> instead of Observable<BreakpointState> as following:

isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
    .pipe(
      map(result => result.matches)
    );

2. In HTML template round brackets are missing in the ternary operators:

[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'"

[taylorc]

I'm getting the same error

[chrisvfabio]

Fixed in #11448

[crisbeto]

Closing since this should be fixed once #11448 is released.

[buerojacob]

Thanks. Good Work!

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}