Ionic 2 Projects: using primeng with ionic 2

@vevedh wrote:

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 :

<link ios-href="build/css/app.ios.css" rel="stylesheet">

this code:

<!-- primeui integration -->
<link rel="stylesheet" type="text/css" href="build/js/primeui/themes/aristo/theme.css" />
<link rel="stylesheet" type="text/css" href="build/js/primeui/primeui-ng-all.min.css" />

• after :

<script src="build/js/angular2-polyfills.js"></script>

• add :

<!-- primeui integration -->
<script src="build/js/primeui/primeui-ng-all.min.js"></script>

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);

Posts: 1

Participants: 1

Read full topic