Can't bind to 'mode' since it isn't a known property of 'mat-sidenav'.

[abhishekgupta2409]

Bug, feature request, or proposal:

Created a new sidenav using angular material cli, while doing ng test, it gives an error.

ts

import { Component, OnInit } from '@angular/core';
import { BreakpointObserver, Breakpoints, BreakpointState } from '@angular/cdk/layout';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@component({
selector: 'app-navigation',
templateUrl: './navigation.component.html',
styleUrls: ['./navigation.component.css']
})
export class NavigationComponent implements OnInit {

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

What is the expected behavior?

What is the current behavior?

Failed: Template parse errors:
Can't bind to 'mode' since it isn't a known property of 'mat-sidenav'.

1. If 'mat-sidenav' is an Angular component and it has 'mode' input, then verify that it is part of this module.
2. If 'mat-sidenav' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("enav" fixedInViewport="false" [attr.role]="(isHandset$ | async)!.matches ? 'dialog' : 'navigation'" [ERROR ->][mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="!(isHandset$ | async)">
   <mat-toolba"): ng:///DynamicTestModule/NavigationComponent.html@1:135
   Can't bind to 'opened' since it isn't a known property of 'mat-sidenav'.

What are the steps to reproduce?

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

 "@angular/animations": "^6.0.0",
    "@angular/cdk": "^6.1.0",
    "@angular/common": "^6.0.0",
    "@angular/compiler": "^6.0.0",
    "@angular/core": "^6.0.0",
    "@angular/flex-layout": "^5.0.0-beta.14",
    "@angular/forms": "^6.0.0",
    "@angular/http": "^6.0.0",
    "@angular/material": "^6.1.0",
    "@angular/platform-browser": "^6.0.0",
    "@angular/platform-browser-dynamic": "^6.0.0",
    "@angular/router": "^6.0.0",
    "core-js": "^2.5.4",
    "moment": "^2.22.1",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26"

Is there anything else we should know?

[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.}