CODEWITHSUNDEEP
angular7primeng
jfranko
jfranko

Reputation: 115

How to integrate PrimeNG designer API into an existing Angular 7 app?

I am currently using PrimeNg v5.2.7 on angular 7.2.0 I am planning to make use of designer API to provide customization features to our users and I think that the designer API will help us do that.

How do I integrate designer api into our exiting application? We are on Angular 7.2.0. Would really appreciate if there are detailed steps outlined somewhere.

https://www.primefaces.org/designer-ng/#/documentation
Went through this 1 page documentation. Extracted the zip of their designer API from the url --> https://github.com/primefaces/primeng-designer-trial Ran the project and made code changes to see if I can give the customization options to my users. It meets my requirements.

How can I add primeng desinger api to my existing angular 7 app?

Upvotes: 1

Views: 1380

Answers (1)

jfranko
jfranko

Reputation: 115

PrimeNg designer app is a collection of some scss files. It will work on PrimNg V5 and up.

Firstly, download the source code from --> https://www.primefaces.org/primeng-designer-api/

The project contains quite a few folders with some files in them. Most important ones is - 'designer' folder. Do not make any changes to this folder. The main files are -->

fonts Folder of the font files
fonts.scss: Definition of the @font-face of the theme
variables.scss: List of variables to create your own theme
extensions.scss: Customizations to the theme
theme.scss: Main theme file that imports the scss files required for the theme

You will have to copy all these folders and then paste it in your current project's assets folder. That's it. That's all you need to do to import the designer API in your current application.

PrimeNg designer API is not great for changing UI on the fly. If you want to provide pre-defined themes, then this is good.

Upvotes: 1

Related Questions