CODEWITHSUNDEEP
angularprimengangular7ionic4
Paul K.
Paul K.

Reputation: 43

How can I use PrimeNG components in Ionic 4?

I would like to use PrimeNG components in Ionic 4 application. I proceeded as follows. I have created a blank Ionic 4 app:

 ionic start myApp blank

Next I have download PrimeNG to the project:

 npm install [email protected] --save
 npm install [email protected] --save

Next I import the first PrimeNG UI component (ButtonModule) as modules in the app.module.ts:

 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { RouteReuseStrategy } from '@angular/router';

 import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
 import { SplashScreen } from '@ionic-native/splash-screen/ngx';
 import { StatusBar } from '@ionic-native/status-bar/ngx';

 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';

 import {ButtonModule} from 'primeng/button';

 @NgModule({
   declarations: [AppComponent],
   entryComponents: [],
   imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, ButtonModule],
   providers: [
     StatusBar,
     SplashScreen,
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
   ],
   bootstrap: [AppComponent]
 })
 export class AppModule {}

Next I added the p-button element into the home.page.html:

 <ion-header>
   <ion-toolbar>
     <ion-title>
       Ionic Blank
     </ion-title>
   </ion-toolbar>
 </ion-header>

 <ion-content padding>
   <p-button label="Click"></p-button>
 </ion-content>

When I start the app with 

 ng serve

I get the following error on the console:

 ERROR Error: "Uncaught (in promise): Error: Template parse errors:
 'p-button' is not a known element:
 1. If 'p-button' is an Angular component, then verify that it is part of this module.
 2. If 'p-button' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("="_blank" rel="noopener" href="https://ionicframework.com/docs/">docs</a> will be your guide.</p>
   [ERROR ->]<p-button label="Click"></p-button>
 </ion-content>
 "): ng:///HomePageModule/HomePage.html@11:2
 syntaxError@http://localhost:4200/vendor.js:8787:17

Thank you for any help.

Upvotes: 2

Views: 7600

Answers (4)

Mohammad Reza Mrg
Mohammad Reza Mrg

Reputation: 2033

you have to add primeng css in your angular.json inside of styles block like this:

"styles": [                           
  {
    "input": "src/theme/variables.scss"                
  },
  {
    "input": "src/global.scss"
  },
  "node_modules/primeicons/primeicons.css",
  "node_modules/primeng/resources/themes/nova-light/theme.css",
  "node_modules/primeng/resources/primeng.min.css"
],

then import every module you need in your page module, for eample inside of home.module.ts:

import {ButtonModule} from 'primeng/button';
@NgModule({
  imports: [
    ButtonModule,
    //..
],
//..

Upvotes: 1

Rotem jackoby
Rotem jackoby

Reputation: 22128

Please make sure your home.page component is part of the AppModule or import the ButtonModule to the same module of the home.page component.

Upvotes: 1

Fernando Leal
Fernando Leal

Reputation: 10135

I believe you have a home.module.ts, if you have the file, you must declare the PrimeNG module in it, something like this:

home/home.module.ts

import { NgModule } from '@angular/core';
import { IonicModule } from 'ionic-angular';
import { HomePage } from './home';

import {ButtonModule} from 'primeng/button';

@NgModule({
  imports: [
    IonicModule,
    ButtonModule
  ],
  declarations: [HomePage],
  entryComponents: [HomePage]
})
export class HomePageModule {}

I created a functional example here

Upvotes: 0

Abhishek Ekaanth
Abhishek Ekaanth

Reputation: 2567

You will have to import all the components module that you are going to use under that module in import.

example : 

imports: [
        BrowserModule,
        FormsModule,
        AppRoutes,
        HttpModule,
        BrowserAnimationsModule,
        AccordionModule,
        AutoCompleteModule,
        BreadcrumbModule,
        ButtonModule,
        CalendarModule,
        CarouselModule,
        ChartModule,
        CheckboxModule,
        ChipsModule,
        CodeHighlighterModule,
        ConfirmDialogModule,
        ColorPickerModule,
        SharedModule,
        ContextMenuModule,
        DataGridModule,
        DataListModule,
        DataScrollerModule,
        DataTableModule,
        DialogModule,
        DragDropModule]

This should work

Upvotes: 0

Related Questions