0

Hello guys im trying to import a simple datepicker, I think I follow the example as described from:https://ng-bootstrap.github.io/#/getting-started project is fresh from ng new here are my files:

app.component.html:

<p>Simple datepicker</p>

<ngb-datepicker #dp [(ngModel)]="model" (navigate)="date = $event.next"></ngb-datepicker>

<hr/>

<button class="btn btn-sm btn-outline-primary" (click)="selectToday()">Select Today</button>
<button class="btn btn-sm btn-outline-primary" (click)="dp.navigateTo()">To current month</button>
<button class="btn btn-sm btn-outline-primary" (click)="dp.navigateTo({year: 2013, month: 2})">To Feb 2013</button>

<hr/>

<pre>Month: {{ date.month }}.{{ date.year }}</pre>
<pre>Model: {{ model | json }}</pre>

app.component.ts:

import { Component } from '@angular/core';
import { NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';

const now = new Date();

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  model: NgbDateStruct;
date: {year: number, month: number};

selectToday() {
  this.model = {year: now.getFullYear(), month: now.getMonth() + 1, day: now.getDate()};
}
}

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgbModule.forRoot(),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

browser console error:

Uncaught Error: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'ngb-datepicker'.
1. If 'ngb-datepicker' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.
2. If 'ngb-datepicker' 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. ("<p>Simple datepicker</p>

<ngb-datepicker #dp [ERROR ->][(ngModel)]="model" (navigate)="date = $event.next"></ngb-datepicker>

<hr/>
"): ng:///AppModule/AppComponent.html@2:20
    at syntaxError (http://127.0.0.1:4200/vendor.bundle.js:25134:34)
    at TemplateParser.webpackJsonp.../../../compiler/@angular/compiler.es5.js.TemplateParser.parse (http://127.0.0.1:4200/vendor.bundle.js:36372:19)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileTemplate (http://127.0.0.1:4200/vendor.bundle.js:50566:39)
    at http://127.0.0.1:4200/vendor.bundle.js:50485:62
    at Set.forEach (native)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileComponents (http://127.0.0.1:4200/vendor.bundle.js:50485:19)
    at http://127.0.0.1:4200/vendor.bundle.js:50372:19
    at Object.then (http://127.0.0.1:4200/vendor.bundle.js:25123:143)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (http://127.0.0.1:4200/vendor.bundle.js:50371:26)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (http://127.0.0.1:4200/vendor.bundle.js:50300:37)

It shows a blank page until I delete this line : <ngb-datepicker #dp [(ngModel)]="model" (navigate)="date = $event.next"></ngb-datepicker>on the html file and then it shows things but it doesnt,work any help?

Lykourgos Papaemmanouil
  • 41
  • 4

0 Answers0