Picking Best UI Framework for Angular 4 Projects:
I have been spending more than 2 weeks on picking best UI framework for my new angular 4 project. Unfortunately no straight forward conclusion. But I am sharing my complete analysis on this to help you guys for better UI pick for your angular 4 projects.
Table of Contents
Criteria to pick/select Best UI framework for Angular 4:
- Should be angular supportive (plain css UI frameworks needs lot of modifications when using with angular 4).
- Angular universal support [For server side rendering and better SEO site developments].
- Should be open source [at-least I prefer open source frameworks only].
Below are the few top angular supportive UI frameworks which you can plan to use for your angular 4 projects.
Note: I did not consider kendo UI framework here, as it is commercial (my third criteria failed, primeng is availble for both open-source and licensed version- only if you required some support from primetek guys]
Below report as on 8th October 2017:
Things to Note:
- ngx-bootstrap and ng-bootstrap both are angular supportive bootstrap components, but I failed with ngx-bootstrap while integrating with angular universal for server side rendering. But I could able to see lot of people raise similar concern in github, hopefully their next version resolves this angular universal integration issue on priority. 🙂
- Other side ng-bootstrap is not that much active like ngx-bootstrap in issue fixes, replies and active developments etc. [this is my personal feel, don’t ask me any proof ;( ]
- Angular material 2 is actually not that much good if you are planning to develop a awesome ui/ux screens/site. Of course angular material 2 google team is working much to meet lot of stuffs. But at this point of time thinking whether to go with angular material 2 or not, of course the documentation can be much better.
- PrimeNg is awesome with more number of components and great documentation. But I feel there is some issue with responsiveness. Even their demos are not good at mobile views .(eg: mega menu)
- Clarity and covalent are entered late in this race, but not that much bad at this time, but there are only limited resources and helps available with these components from communities like stackoverflow, so I am little afraid to pick it.
Conclusion:
Finally, I concluded these two options for my angular 4.
- Develop UI/UX with awesome plain materializecss framework and integrate with angular material 2 wherever applicable currently and do a regular upgrade whenever a new component introduced in the native angular material 2.
- Develop UI/UX with plain bootstrap 4 framework and integrate with ngx-bootstrap/ng-bootstrap wherever applicable and same upgrade process whenever new component arrives.
- In any of these approach make sure to check angular universal integration compatibility in beginning itself to avoid big code changes.
Feel free to share your thoughts to pick best UI frameworks with details in the below comments section.