CODEWITHSUNDEEP
angulartypescriptprimeng
RoyBarOn
RoyBarOn

Reputation: 987

PrimeNG components wrong import path

I'm newbie to Angular, I've followed This tutorial and succeed getting the results. Now I've tried to add calendar component by following This instructions - but i can't get the right import path....

Here is what it's looks like enter image description here

I'm getting the following error :

Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'p-calendar'.
1. If 'p-calendar' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.
2. If 'p-calendar' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("<h1>PrimeNG Hello World</h1>
    <p-calendar [ERROR ->][(ngModel)]="value"></p-calendar>

    <input type="text" pInputText placeholder="Please enter your n"): UserAppComponent@1:16
    at resolvePromise (zone.js:418)
    at resolvePromise (zone.js:403)
    at zone.js:451
    at ZoneDelegate.invokeTask (zone.js:225)
    at Zone.runTask (zone.js:125)
    at drainMicroTaskQueue (zone.js:357)
    at XMLHttpRequest.ZoneTask.invoke (zone.js:297)

Here is my app.component.ts :

     import {Component, ViewEncapsulation} from '@angular/core';
        import {ConfirmationService, Message} from "primeng/components/common/api";
        import {CalendarModule} from "primeng/components/calendar/calendar"; // path not working
        import {ButtonModule} from 'primeng/primeng'; // path not working


        @Component({
            selector: 'app',
            template: `<h1>PrimeNG Hello World</h1>
            <p-calendar formControlName="date"></p-calendar> // the calendar component
            <input type="text" pInputText placeholder="Please enter your name"
                   (change)="onChangeEvent($event)" />
            <button pButton type="text"
                    (click)="getReponse()" icon="fa-check" label="Check"></button>

            <p>

                <p-confirmDialog width="400"></p-confirmDialog>`,
            providers:  [ConfirmationService]
        })
        export class UserAppComponent {
            name: string;
            checkUserInput: string;

            constructor(private checkResponseService: ConfirmationService) {}

            onChangeEvent({target}){
                this.name = target.value;
            }

            getReponse(){

                this.checkResponseService.confirm({
                    message: ` Hi ${this.name}, is this your first PrimeNG program?`,
                    header: 'Greeting',
                    icon: 'fa fa-question-circle',
                    accept: () => {

                        this.checkUserInput = this.name + " responded " + "This is his first PrimeNG Program";
                    },
                    reject: () => {
                        this.checkUserInput = this.name + " responded " + "This is not his first PrimeNG Program";
                    }
                });
            }
        }

I can't figure out why the path wrong...since this path is correct 

    import {ConfirmationService, Message} from 
    "primeng/components/common/api";

I simply replace the path with "calendar/calendar"

Upvotes: 2

Views: 3582

Answers (1)

Haseoh
Haseoh

Reputation: 930

This tutorial seems to be outdated. You should simply:

import { CalendarModule } from 'primeng/primeng';

in your @NgModule and it should be ok.

Upvotes: 2

Related Questions