Style existing primeng components

[DSchaller]

Hello.


The documentation describes integration of the entire theme into a project, however, I would like to style individual primeng components in an existing angular 2 app which utilizes angular material 2 for layout, etc.

Simply stated, I would like to theme the controls as on the forms demonstration page: http://www.primefaces.org/ultima/forms.xhtml

My trial and error approach to make this happen hasn't led to a viable solution.

I've copied the ultimate-layout to node_modules/primeng/resources and added "../node_modules/primeng/resources/ultima-layout/css/layout-indigo.css" to the styles section of the angular-cli.json ( I am utilizing angular-cli ). - Probably not even close with this approach.

Any help appreciated.

Thanks.

[DSchaller]

It appears as if the Ultima Layout package is unnecessary when needing to style the components only and not utilizing the layout.
I was able to reference the layout css and the existing controls are now displayed in a material design style.

1. Download a style resource. ie. http://www.primefaces.org/ultima-ng/res ... indigo.css ( I am surprised that my ultima download did not include any theme files but other packages may have included them. )
2. Place file in a publicly accessible location. ie. assets/primeng/theme-indigo.css
3. Reference style sheet within the app. Depending on the setup, this may be in the index.html, component template, or for angular-cli, update angular-cli.json

Code: Select all

...
      "styles": [
        ...
        "assets/primeng/theme-indigo.css",
        ...
      ],
...

I did notice that additional css style sheets effect some previous styling, so css tweaks may be needed.

[cagatay.civici]

Yes, you need the theme only to style the PrimeNG components only.