15

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?

Husam Zidan
  • 619
  • 6
  • 18
  • What do you mean by "slow down"? The only thing that bundle size could be a little bit bigger, but if you use angular cli's optimization + aot it will perform minification + tree shacking which should remove all unused things. – Amir Arbabian Feb 03 '19 at 11:13
  • 1
    Hi Amir, then do you agree with me to use both of them in the same project? – Husam Zidan Feb 03 '19 at 11:22
  • 2
    Why not? It's two completely separate libraries, and it's not 2000 where libraries post some things into global scope, you know, so you can use both of them, the only concern is that they might have **markup selectors intersection** and **styles can conflict with each other** but you need to check that. I'm aware only about **angular material**, and as far as i know it requires **some styles to be included globally**. – Amir Arbabian Feb 03 '19 at 11:25
  • I've checked and **PrimeNG** also requires **some styles to be included globally**, so that could be the problem. But anyway, i think no one will answer you for sure, you just need to check that. – Amir Arbabian Feb 03 '19 at 11:27
  • Thanks man, I will check both of them. – Husam Zidan Feb 03 '19 at 11:36
  • @HusamZidan, so how was your experience. It would have been great if you would have contributed your experience after using both, for other's help like me. – Muhammad Rehan Qadri Jun 07 '21 at 11:51
  • Today I'm facing the same issue. I'm already using PrimeNg and PrimeIcons. Now when I'm installing Material in the same project I'm getting npm installation errors related to dependency conflicts. Please help me. How did you resolve this. – Tanzeel Sep 24 '22 at 10:31

1 Answers1

24

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.

SiddAjmera
  • 38,129
  • 5
  • 72
  • 110