Material Datepicker is not working in Angular4

Question

Material Datepicker is not working in angular4 project. I did it everything as shown in angular official documantation here but still it gives an error. This is my module

import { MdTabsModule, MdProgressSpinnerModule, MdInputModule, MdDatepickerModule, MdNativeDateModule} from '@angular/material';

This is imports

imports: [
BrowserModule,
HttpModule,
BrowserAnimationsModule,
MdTabsModule,
MdProgressSpinnerModule,
MdInputModule,
FormsModule,
ReactiveFormsModule,
AmChartsModule,
MdDatepickerModule,
MdNativeDateModule,

And This is HTML

<md-form-field>
  <input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
  <md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle>
  <md-datepicker #picker></md-datepicker>
</md-form-field>

Error ScreenShot

Angular Version

Answer 1

<md-datepicker-toggle> has been introduced in material2 version 2.0.0-beta.10.

mdDatepickerToggle is now an element < md-datepicker-toggle > with a for property that points to the MdDatepicker instance

Here is a link to complete CHANGELOG. Using <md-datepicker-toggle> will throw an error if you have version 2.0.0-beta.8 or lower installed. To update to the new version, do the following:

• In your package.json, change "@angular/material" and "@angular/cdk" version to "2.0.0-beta.10"
• In your terminal window, navigate to the folder in your project where package.json is located.
• Run the command npm install

Here is a working demo using version 2.0.0-beta.10.