Can't bind to 'mdDatepicker' since it isn't a known property of 'input'

Question

I'm trying to make use of Angular Material design, but I keep running into this error

Can't bind to 'mdDatepicker' since it isn't a known property of 'input'.

I'm following this documentation to install MD.

I have imported the following into my app.module.ts

/* Material Design */
import { MdDatepickerModule, MdNativeDateModule } from "@angular/material";

and added it to @NgModule

@NgModule({
    imports:
    [
        ...
        BrowserModule,
        BrowserAnimationsModule,
        HttpModule,
        /* Material Design */
        MdDatepickerModule,
        MdNativeDateModule,
    ],

In my component template I just copy pasted the example's code

<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>

I don't do anything special in my component.ts file

import { Component, Input, Output, EventEmitter } from "@angular/core";
import { TranslationPipe } from "../../../pipes";

@Component({
    selector: "date-picker",
    templateUrl: "./date-picker.component.html",
    styleUrls: ["./date-picker.component.scss"],
})
export class DatePickerComponent {

    @Input()
    date;

    constructor(
        private translationPipe: TranslationPipe,
    ) {

    }
}

I'm stuck here and I can't find any solutions to this. The only solution I found was Can't bind to 'mdDatepicker' since it isn't a known property of 'input' - Angular but as you can see I implemented it and it didn't help me.

I guessing I'm looking over something, or did I miss a step?

Thanks in advance

Is `DatePickerComponent` part of the same `NgModule` as the imports shown above? — Günter Zöchbauer, Sep 04 '17 at 08:37
It's component of my `shared.module.ts`, which is imported in my `app.module.ts`. The shown code is from `app.module.ts` — Nicolas, Sep 04 '17 at 08:44

score 4 · Accepted Answer · answered Sep 04 '17 at 08:46

4

Directives need to be listed in imports: [...] of the module where they are used.

@NgModule({
    imports:
    [
      MdDatepickerModule,
      MdNativeDateModule, 
    ]
}
export class SharedModule {

Importing them in AppModule only makes them available in components listed in directives: [...] of AppModule but nowhere else.

answered Sep 04 '17 at 08:46

Günter Zöchbauer

623,577
216
2,003
1,567

aah, I thought `app.module.ts` was like a global thing. You fixed it! thanks. – Nicolas Sep 04 '17 at 08:54
Service provided on `AppModule` become available everywhere (global singleton), but directives, components, and pipes need to be imported in every module individually to make them available. – Günter Zöchbauer Sep 04 '17 at 08:56

score 0 · Answer 2 · edited Feb 07 '18 at 20:43

With the new version of angular4 datepicker, the syntax was changed to the below code:

Starting of DatePicker Module:

<mat-input-container>
  <input matInput [matDatepicker]="picker" placeholder="Choose A Date:"><br/><br/>
  <mat-datepicker-toggle mdSuffix [for]="picker"></mat-datepicker-toggle>
</mat-input-container>
<mat-datepicker #picker></mat-datepicker>

This worked for me and was able to see the output in the UI.

Can't bind to 'mdDatepicker' since it isn't a known property of 'input'

2 Answers2