Not able to include PrimeNG in Angular 2 Webpack app

2
votes

I am using ng2-admin template and trying to include PrimeNG in it, but I am struggling to add it.

Below changes I did in the template to include PrimeNG

./src/vendor.browser.ts:

// Prime faces: http://www.primefaces.org/primeng/#/setup
import 'primeng/primeng';

./src/app/app.module.ts:

import { ToggleButtonModule } from 'primeng/primeng';

@NgModule({
  bootstrap: [App],
  declarations: [
    App
  ],
  imports: [ // import Angular's modules
    ...
    ...
    ...
    ToggleButtonModule
  ],
  providers: [ // expose our Services and Providers into Angular's dependency injection
    ENV_PROVIDERS,
    APP_PROVIDERS
  ]
})

./src/app/pages/dashboard/dashboard.component.ts:

import { ToggleButtonModule } from 'primeng/primeng';

./src/app/pages/dashboard/dashboard.html:

<p-toggleButton [(ngModel)]="checked"></p-toggleButton>

I am getting following error:

Can't bind to 'ngModel' since it isn't a known property of 'p-toggleButton'.

  1. If 'p-toggleButton' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.
  2. If 'p-toggleButton' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.

If I remove ngModel from the tag, I get following error:

'p-toggleButton' is not a known element:

  1. If 'p-toggleButton' is an Angular component, then verify that it is part of this module.
  2. If 'p-toggleButton' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.

What is the correct way to integrate PrimeNG in Angular 2-Webpack app? What I am missing here?

2
angularwebpacktogglebuttonprimeng

2 Answers

0
votes

I haven't used PrimeNG yet, but am looking into it.

However, I think your problem is simpler to solve. ngModel comes from the Angular FormsModule. Their documentation could make this dependency more clear.

Add this to your NgModule.

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    ...
    FormsModule
  ],
  ...
});
0
votes

Please Import it in ./src/app/pages/dashboard/dashboard.component.ts:

import {ToggleButtonModule} from 'primeng/togglebutton';


export class DashboardComponent {
    checked: boolean;
}

In ./src/app/app.module.ts

import { FormsModule } from '@angular/forms';     
    @NgModule({
      imports: [        
        FormsModule
      ]      
    })