Uncaught Error: Template parse errors: ej2-datepicker angular 6

Question

trying to implement ej2-calender in my project but faced below error..

The same code is working with demo project.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { DateRangePickerModule } from '@syncfusion/ej2-angular-calendars';
import { AppComponent } from './app.component';
import { ComponentNameComponent } from './component-name/component-name.component';

@NgModule({
  declarations: [
    AppComponent,
    ComponentNameComponent
  ],
  imports: [
    BrowserModule,
    DateRangePickerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

datepicker.html

    <div class="form-group daterange-group">
            <ejs-daterangepicker id='daterangepicker' placeholder='Select a range' [startDate]='start' [endDate]='end'></ejs-daterangepicker> 

datepicker.ts

public start: Date = new Date ("10/07/2017"); 
public end: Date = new Date ("11/25/2017");
</div>

Uncaught Error: Template parse errors: Can't bind to 'startDate' since it isn't a known property of 'ejs-daterangepicker'.

1. If 'ejs-daterangepicker' is an Angular component and it has 'startDate' input, then verify that it is part of this module.

2. If 'ejs-daterangepicker' 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. (" col-md-3 col-sm-4">)

Answer 1

you need to import the component module (i guess it is DateRangePickerModule) in the app.module.ts.

component docs

Answer 2

Try this example in stackblitz

In html <ejs-daterangepicker [startDate]='start' [endDate]='end'></ejs-daterangepicker>

app.module.ts

import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns';

import { DateRangePickerModule } from '@syncfusion/ej2-angular-calendars';

import { HttpModule } from '@angular/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from '../app.component';

@NgModule({ declarations: [ AppComponent ], imports: [ DateRangePickerModule, DropDownListModule, BrowserModule, FormsModule, ReactiveFormsModule], providers: [], bootstrap: [AppComponent]
})
export class AppModule { }