Ionic 2 Projects: using primeng with ionic 2

integration de primeng / primeui in ionic 2 application
at root application add modules run :

npm install primeui --save
npm install primeng --save

in www/index.html:
add before :


this code:



  • after :

  • add :


**tips for Calendar Component** **replace** in file primeui-ng-all.min.js : *datepicker_getZindex($(e))+1* **by** datepicker_getZindex($(e))+999

Now You can use sample code:

import {Page,Platform,MenuController} from 'ionic-angular';
import {Calendar} from 'primeng/primeng';


@Page({
  templateUrl: 'build/pages/page1/page1.html',
  directives: [Calendar]
})
export class Page1 {
  dateValue:any;
  ....
  
  constructor(platform: Platform, menu: MenuController) {
    this.dateValue = '';
    .......
 
  }
}

ATTENTION
You must create in node_modules directory ionic-gulp-primeui-copy with file index.js :
content :

var gulp = require('gulp');

var defaultSrc = [
    'node_modules/primeui/**/*.*'
];

module.exports = function(options) {
  options.src = options.src || defaultSrc;
  options.dest = options.dest || 'www/build/js/primeui';

  return gulp.src(options.src)
    .pipe(gulp.dest(options.dest));
}

MODIFY gulp.js
ADD

var copyPrimeui = require('ionic-gulp-primeui-copy');
...
gulp.task('primeui', copyPrimeui);

:slight_smile:

2 Likes

I did all of them but when I try to ionic serve, it gives me this error on terminal:

Error: Cannot find module ‘@angular/core’ from ‘C:\Users\can\mobile\ionic
r\node_modules\primeng\components\tree’

it gives that error for each component.

I think actually ionic 2 framework and primeng framework not using the same version of angular2 , I could try with beta ionic 2 using angular rc1

@vevedh is right --> ionic 2 beta 6 uses angular beta 15. the new namespacing ‘@angular/…’ was introduces in the RC’s

Thanks for the information. Should we update the angular2 version or wait for it to become comfortable with Ionic side?

You’re going to have to wait for Ionic to support it. It’s completely impossible to mix code that is importing from @angular with code that is importing from angular2.