CODEWITHSUNDEEP
angular
edkeveked
edkeveked

Reputation: 18401

Type 'Observable<boolean>' is not assignable to type 'Observable<BreakpointState>'

Using angular-material schematic, I want to generate the navigation menu. For that I use the following command:

ng generate @angular/material:material-nav --name layout

When I serve my application, this error is thrown:

error TS2322: Type 'Observable' is not assignable to type 'Observable'. Type 'boolean' is not assignable to type 'BreakpointState'.

Upvotes: 2

Views: 3403

Answers (2)

Samarth Saxena
Samarth Saxena

Reputation: 1191

Just change type of observable to boolean in your typescript file. Match parentheses in your component html file [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'"

here is the fix in Green Lines

enter image description here

Here is the main link of fix-https://github.com/angular/material2/pull/11448/commits/20306dbeed3fe7232ffb85ba1d9fd406f6885db2

Upvotes: 1

Lafexlos
Lafexlos

Reputation: 7735

Adding an answer just to make this remove from unanswered ones.

This is a known issue and fixed by this pull request.

Until this PR goes live, you can make changes manually.

__name@dasherize__.component.html

From: 

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

To: 

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

__name@dasherize__.component.ts

From: 

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

To: 

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

From: 

isHandset$: Observable<BreakpointState> = this.breakpointObserver.observe(Breakpoints.Handset)

To: 

isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)

Upvotes: 3

Related Questions