Using Angular Material2 with PrimeNG in the same project

Question

I am currently working on an enterprise Angular application. I am thinking about the correct components library to use. I found two options:

1- Angular Material2

2- PrimeNG

Angular material comes with about 35 high quality components. PrimeNg comes with about 87 different components. I like Material2 design and styling which follow Google standards. I prefer it but later we will need more advanced components that not available. My question is it a good idea to use both Material2 and PrimeNg at the same time? or this will cause overhead, conflicts and slow down the application? Should I stick to PrimeNg only?

Answer 1

I used both Angular Material and PrimeNg for a recent project. I'd recommend you to use just one of them(either Angular Material or PrimeNg)

PrimeNg has a lot of powerful Components. I really liked how many of these components are Reactive Forms Friendly as they implement ControlValueAccessor. Plus there's hardly a Component in Angular Material that you'll not find in PrimeNg.

If you use both of them, however, you'll probably end up in some styling issues, some of them related to z-index. I faced one with some cards grid mostly build in Angular Material but the Calendar that I used was from PrimeNg. I had to put in a hack using Angular Material Flex in order to make it work.

A few advantages of using just one of them would be:

1. No conflicting styles that you'd have to manage.
2. The bundle size would be less. This size gap may not be significant.
3. The UI and UX would be consistent throughout the App.

So again, if possible, use just one.

PS: This is my personal opinion.