Ngx-admin: How to Integrate primeng ?

[erlopezh]

• I'm submitting a ...
  [ ] bug report
  [x ] feature request
  [ ] question about the decisions made in the repository

Can you please explain how to import and use "primeNG" ui components?

I created a new page and I tried to place the primeNG panel, but this is not displayed correctly.
(sorry my bad english)

import {Component} from '@angular/core';
import { Panel} from 'primeng/primeng';

@Component({
selector: 'new',
pipes: [],
providers: [],
directives: [Panel],
styles: [],
template: <p-panel header="Title"> Content </p-panel>
})
export class New {

constructor() {
}
}
Thanks.

[nnixaa]

Hi @erlopezh, are there any errors in browser console?

[erlopezh]

Hi @nnixaa , there are no errors in the browser console

[nnixaa]

@erlopezh okay, it's hard to debug the issue this way, could you provide a plunker or something? Have you imported the styles as per http://www.primefaces.org/primeng/#/setup documentation?

[erlopezh]

Hi @nnixaa , I had imported styles according primeng documentation, but can not be located from the folder "node_modules/primeui"

As workaround, i had copied

node_modules/primeui/themes
node_modules/primeui/primeui-ng-all.min.css
node_modules/primeui/primeui-ng-all.min.js

to the "assets" folder. Webpack copies the contents of "assets" folder to "dist" folder

   new CopyWebpackPlugin ([{
       from: 'src/assets'
       to: 'assets'
     }]),

In the index.html, i had changed "node_modules" to "assets"

<link rel="stylesheet" type="text/css" href="assets/primeui/themes/omega/theme.css" /> <link rel="stylesheet" type="text/css" href="assets/icon/css/font-awesome.min.css" /> <link rel="stylesheet" type="text/css" href="assets/primeui/primeui-ng-all.min.css" />

then the components are displayed correctly

is this workaround the right way ?

[nnixaa]

@erlopezh yes, there is a way to include styles correctly, for example, take a look at this 'loader' for fullCalendar jquery plugin https://github.com/akveo/ng2-admin/blob/master/src/app/theme/components/baFullCalendar/baFullCalendar.loader.ts

then this file is just imported into the component where it used.
I guess you can do this the same way, create a loader, require styles and js files in it and then import it into your component.

[nnixaa]

@erlopezh hope this helped, I'm closing the issue now, let me know if you need any assistance.

[paw1]

Would be nice to have an update on this since a lot has changed. What is the proper method to import some primeNg components into ng2-admin?