CODEWITHSUNDEEP
angularimportprimeng
ZaksBack
ZaksBack

Reputation: 189

Angular-CLI import primeng

I am trying to get primeng working in my angular2 project but have yet to get it working.

Steps taken:

  1. Installed: npm install primeng --save
  2. Added to module import {DialogModule} from 'primeng/primeng'; @NgModule({... imports: [DialogModule, ...]});
  3. Added stylesheets to index.html
  4. Added to template: <p-dialog header="Test" [(visible)]="display"> Content </p-dialog> Note: display: boolean = false in component

I don't get any build or run time errors, nothing happens when I click a button which sets display = true.

In my research I have seen a lot of refrences to webpack and system.js and that I have to map it. I cant find those files so I am not sure if it applies to me.

Edit: [email protected]

Upvotes: 0

Views: 6423

Answers (3)

Mertcan Diken
Mertcan Diken

Reputation: 15351

You just need to import which module you will use that one is correct.

Your cli.json should look like this. It's just an example by the way.

"styles": [
    "../node_modules/font-awesome/css/font-awesome.min.css",
    "../node_modules/primeng/resources/themes/omega/theme.css",
    "assets/layout/css/layout.css",
    "../node_modules/primeng/resources/primeng.min.css",
    "../node_modules/fullcalendar/dist/fullcalendar.min.css",
    "../node_modules/quill/dist/quill.snow.css",
    "../node_modules/nanoscroller/bin/css/nanoscroller.css",
    "../node_modules/animate.css/animate.css",
    "styles.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/chart.js/dist/Chart.js",
    "../node_modules/moment/moment.js",
    "../node_modules/fullcalendar/dist/fullcalendar.js",
    "../node_modules/quill/dist/quill.js",
  ],

Upvotes: 1

John Baird
John Baird

Reputation: 2676

You have to add it to the exports also (to make it visible to the components):

@NgModule({
  imports: [ DialogModule],
  exports: [ DialogModule ]
})

Upvotes: 0

Pardeep Jain
Pardeep Jain

Reputation: 86730

Steps to be taken may help you,

  • 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"
     ....
  ],

    ....

  • Print your variable display in html for surety of binding and also try simply setting modal true by default, like this

     <p-dialog header="Test" [(visible)]="true">....

Upvotes: 0

Related Questions