0

has anyone successfully integrated a PrimeNG template into a different framework? I’m working on a large project build with Infragistics, and I’m looking to integrate the PrimeNG Apollo template. However, I’m facing several challenges, especially with style conflicts,and attempting to incorporate the PrimeNG menu component was completely unsuccessful. Is such an integration feasible in general?

Another option would be to slowly change infragistic components to PrimeNG , which would be extremely time-consuming, then completely remove Infragistics, and only after that integrate Apollo.

I tried the usual approach to integrate the template and later just one component. (From PrimeNg documentation) It seems Infragistics and PrimeNg are in each others way.

Improve this question
2
  • I can't imagine anyone has ever tried this or even succeeded. These different frameworks are not created so that they can be operated in parallel. Commented Apr 2, 2024 at 13:26
  • @eekinci If I understand correctly we're still talking the same framework - Angular, just two different libraries. For their part, while not designed to be explicitly compatible with every other library out there (not really feasible), components should be designed to be self-contained and their functionality should be pretty indifferent Whatever the specific issue is, more concrete details or an example are needed to identify it, but I'll try to answer the general question as defined anyway. Commented Apr 4, 2024 at 12:54

1 Answer 1

Reset to default
0

I see no reason why it shouldn't work, both are still Angular libraries so using more than one is certainly be possible.
Technically possible to mix frameworks even (with something Web Components-based probably the easiest to slot in others), though sometimes with some challenges involved, but I digress.

To answer the question:
At least for Ignite UI for Angular (Infragistics) all of the styling CSS variables are prefixed with --ig and all CSS rules target igx- prefixed elements or classes and shouldn't interact with other libraries by default.
Typography could be global, but really depends on where it's scoped since it can be and it's also optional.
From what I can see, the same should be true for PrimeNG with p-/pi- prefixes and layers, unless there's some global styling I'm not aware.

There are actually examples of mixing libraries in the Ignite UI for Angular docs already:

  • Bootstrap Theming also uses components from @ng-bootstrap/ng-bootstrap. The nav bar used igxButton and ngbDropdown menu actually, amongst others.
  • Material Theming also uses components from @angular/material. Same here, the second button in the nav bar is igxButton but triggers a mat-menu

While those topics go in detail how to use Ignite's theming engine to style both sets of components in order to have one palette as single source of truth, that's certainly up to specific use case/needs. The point still stands, that you can mix libraries and customize styling if needed.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.