Angular best UI open source components

I must admit that most of the companies I have worked with developed their own Angular components.

However, I usually work as a consultant for large companies with many developers.

Pre-built components are great for small internal projects within your company, personal projects, or quickly building a solution as a startup.
At some point, though, your requirements will become so specific, and you'll encounter so many bugs in external components, that you'll end up developing your own components and libraries.

Here is a list of what I found on the web.

Angular Material

Link: Angular Material
GitHub: https://github.com/angular/components

Angular Material is the 'official' UI components suite released by the Angular / Google Team.
It's often the only external components library accepted in big companies because is an extension of the framework.

To really profit from this library you need to understand the Material Design concepts https://material.io/design and play with the CDK https://material.angular.io/cdk/categories.

If you don't spend time to understand it your result risks being pretty ugly visually and at code level.

Many developers think that Angular Material is over-engineered ... well if you are a React.js/Vue.js dev you think the same about Angular.

Very often, this is the first choice for many companies, it's worth to learn them.

PrimeNG

Link: PrimeNg
GitHub: https://github.com/primefaces/primeng

You can find often PrimeNG in environments with a strong Java culture. This is because PrimeFaces was 'de facto' the standard library to develop JavaServer Faces (JSF).

PrimeNG offers a great variety of components with a lot of features 'out of the box'. It could be worth a try if you are prototyping a solution.

What I notice in the companies that used PrimeFaces is that they adopt the library when they migrate the stack towards Angular and they abandon it when they start to build their own libraries.

I think that one issue of PrimeNg, for these companies, is that you have to build a license if you want support and / or you want a nice and cool design (style) to apply to your components.

If you are in a small team and you have to develop quickly without 'administrative' issues in spending few bucks is licenses, probably PrimeNg has a lot to offer.

Clarity Design

Link: Clarity Design
GitHub: https://github.com/vmware/clarity

With well designed components Clarity try to implement a full design system that allows you to create visually appealing web applications.

The library is built by the VMWare Team and I think is used internally for their products. I personally like their style unfortunately I never found the opportunity to use them in deep.

The features of the components are more limited compared to other libraries and the design didn't fit for PWA (the requirement at the time).

I'd suggest you to give it a try if your requirements are well defined and Clarity can satisfy them.

Teradata Covalent

Link: Covalent
GitHub: https://github.com/Teradata/covalent

Teradata is based on material design, they have some very 'technical' components (e.g. Code Editor, Charts).
I never used this library, but I suggest you to give a look and see what they can offer that maybe you cannot find in other libraries.

Taiga UI

Link: Taiga UI
GitHub: https://github.com/TinkoffCreditSystems/taiga-ui

This is a discovery in 2021, at least for me. I didn't test the components yet but they seem polished with some components that you cannot find in other libraries.

I'll try to use this library for my next project.

ng-alain

Link: ng-alain
GitHub: https://github.com/ng-alain/ng-alain/

This library is based on ng-zorro ant design. I cannot write a lot about this library because I never used it.
Ant Design seems to be pretty widespread in Asia and you can find the implementations of this design for other frameworks.

It could be worth more investigation if you are looking for alternative designs.

ng-aquila

Link: ng-aquila
GitHub: https://github.com/allianz/ng-aquila

This library is created by the German insurance Allianz, it continues to be updated with the latest features of Angular.

SBB - Swiss Railways

Link: sbb ng components
GitHub: https://github.com/sbb-design-systems/sbb-angular

These components are created and used for the Swiss Railways company (SBB). They are well done, I'm not sure how frequently they are updated. They are an excellent starting point or inspiration for your own development.

other

For sure, you can find other projects on the web (bootstrap for angular etc.). I tried to limit the list to some pretty solid projects that should avoid surprises during the development.

If you know other libraries of components that could be interesting to mention here, drop me a line.

Better 'standard' public components than company's components

Very often, a group of motivated developers starts creating a set of reusable components within the company. This can emerge either from a spontaneous interest in sharing work or as a top-down decision to enforce a consistent UI across the company.

The biggest challenge is that after the initial effort of developing these components—often funded by a single project—no one wants to maintain them, or there are simply no resources allocated for this task.

When this happens, projects using the shared library become stuck, unable to upgrade their Angular version. Shared libraries also come with other risks, such as unresolved bugs that are not prioritized or components with limited features that no one is willing to improve.

In many projects, we initially used company-wide shared components, but after a lot of frustration, we had to develop project-specific components because the shared ones quickly became a legacy burden.

My recommendation is to use a public library as the foundation for your component library and apply minimal customization to ensure a consistent company-wide design.