CODEWITHSUNDEEP
angulartypescriptprimeng
Cristian Muscalu
Cristian Muscalu

Reputation: 9905

Angular2 add PrimeNG component

Here are the steps I did to install PrimeNG:

  1. npm install primeng --save npm install primeui --save

  2. Update Index.html: (I had to copy directories primeng and primeui from node_modules to the assets folder to get rid of 404 file not found error) 

    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/flatly/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="assets/styles.css">
<link rel="stylesheet" href="assets/primeui/themes/omega/theme.css">
<link rel="stylesheet" href="assets/primeui/primeui-ng-all.min.css">`

  3. Update test.component.ts:

    import {Calendar} from '../../assets/primeng/primeng';
....
export class TestComponent {
     dateValue:string;
}

  4. Update test.component.html:

    <p-calendar formControlName="date"></p-calendar>

Result: nothing gets shown on page.

Am I missing something?

Edit1:

  1. I now think it's important to say I installed the project using angular-cli
  2. If I add <p-calendar [(ngModel)]="dateValue"></p-calendar> to test.component.html , I get

    Error: Uncaught (in promise): Cannot assign to a reference or variable!

Edit2:

I just tried it in another project that is not using angular-cli: 

    <link rel="stylesheet" href="node_modules/primeui/themes/omega/theme.css" />
    <link rel="stylesheet" href="node_modules/primeui/primeui-ng-all.min.css" />
    ....
    import {Calendar} from 'primeng/primeng';
    ....
    <p-calendar formControlName="date"></p-calendar>

as soon as I add directives:[Calendar] I get Error:

http://localhost:3000/primeng/primeng 404 (Not Found)
Error: Error: XHR error (404 Not Found) loading http://localhost:3000/primeng/primeng(…)

enter image description here

Upvotes: 12

Views: 26199

Answers (9)

minabagheri
minabagheri

Reputation: 541

You must first use the npm command to install the calendar Then add it in your modules file in two parts, imports and exports.

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CalendarModule,
    FormsModule
  ],
    exports: [CalendarModule,],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

Upvotes: 0

Rehan
Rehan

Reputation: 1039

Install PrimeNG

npm install primeng --save

enter image description here

Install Prime Icons

npm install primeicons --save

enter image description here

Install Font Awesome

npm install font-awesome --save

enter image description here

Install Angular CDK

npm install @angular/cdk --save

enter image description here

If we now go to package.json, we will see the following primeng dependencies enter image description here

Open the angular.json and add the following in the styles section

"./node_modules/primeicons/primeicons.css",
  "./node_modules/primeng/resources/themes/nova-light/theme.css",
  "./node_modules/primeng/resources/primeng.min.css",

enter image description here

Adding the PrimeNG Component in Angular Application For adding any PrimeNG Component in Angular we will be following below steps- enter image description here

Reference - https://www.codeusingjava.com/angular/primeng/prime1
Reference - https://youtu.be/4Wk4RgYN9ZQ

Upvotes: 0

Binara Thambugala
Binara Thambugala

Reputation: 776

This the complete documentation of Primeng Setup: https://www.primefaces.org/primeng/#/setup

Here How we adding a calendar : https://www.primefaces.org/primeng/#/calendar

Upvotes: 0

Angel Ferrando
Angel Ferrando

Reputation: 31

Add import CalendarModule in your app.module.ts

@NgModule({  imports: [
CommonModule,
CalendarModule],  declarations: [CarruselComponent],  exports: [    CarruselComponent ]})

Upvotes: 0

Pardeep Jain
Pardeep Jain

Reputation: 86730

See at the bottom of documentation page

Dependencies jQuery UI Datepicker and DateTimePicker

so you have to embed these lines in your index.html which you haven't embed i think so try using this

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

also don't forget to list down calendar in the list of directives under @component

Update

  • Shift all your css files of primeng from index.html to angular-cli.json file. like this

    "styles": [
    "../node_modules/font-awesome/css/font-awesome.css",
    "../node_modules/primeui/primeui-ng-all.min.css"
     ....
  ],

move all your primeng js files as well in angular-cli.json file.

  • as of now all the components of primeng are converted in module so we have to import all the components in the main module file. (app.module.ts file in my case).

Upvotes: 5

Eddie Martinez
Eddie Martinez

Reputation: 13910

You have to add it your imports in the module.ts file otherwise Angular ignores it.

Upvotes: 0

Mertcan Diken
Mertcan Diken

Reputation: 15351

Hey this is the most updated primeng angular cli quickstart project take a look.

https://github.com/primefaces/primeng-quickstart-cli

Upvotes: 4

Poul Kruijt
Poul Kruijt

Reputation: 71891

Update your mapping in SystemJS to something like this:

var map = {
 'app':                        'app', // 'dist',
 '@angular':                   'node_modules/@angular',
 'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
 'rxjs':                       'node_modules/rxjs',
 'primeng':                    'node_modules/primeng'//<-- add this
};

And update your packages in SystemJSto something like this:

var packages = {
 'app':                        { main: 'boot.js',  defaultExtension: 'js' },
 'rxjs':                       { defaultExtension: 'js' },
 'angular2-in-memory-web-api': { defaultExtension: 'js' },
 'primeng':                    { defaultExtension: 'js' } //<-- add this
};

For importing you can use this:

import {Calendar} from 'primeng/components/calendar/calendar';

or if you just don't care that it loads all components you can just use:

import {Calendar} from 'primeng/primeng';

For further reference I suggest you look at the setup of PrimeNG

Upvotes: 16

Sanket
Sanket

Reputation: 20007

Try adding primeui-ng-all.min.js in index.html

<!-- JS for PrimeUI -->
<script src="node_modules/primeui/primeui-ng-all.min.js"></script>

See if this helps.

Upvotes: 1

Related Questions