The 7 most recommended Angular front-end component libraries in 2021-DevUI

Abstract: DevUI is an open source front-end solution for enterprise middle and back-end products. It advocates immersion, flexible, and simple. It advocates designers to serve real needs, design for most people, and reject grandstanding. Eye-pleasing design. If you are developing ToB and tool products, DevUI will be a very good choice!

DevUI is a team with both design and engineering perspectives. It serves the Huawei Cloud DevCloud platform and Huawei's internal mid- and back-end systems, as well as designers and front-end engineers.

Official website: devui.design

Ng component library: ng-devui (Welcome to Star)

Official communication: add DevUI-official

DevUIHelper plug-in: DevUIHelper-LSP (Welcome to Star)

Angular is a front-end framework that can span multiple platforms of Web, mobile Web, mobile applications, native applications, and desktop native applications. After decades of development, it has formed a huge ecology, and there are many Angular-based component libraries.

If you want to try the Angular framework in 2021, the following Angular component library may be a good choice!

1. Material Design for Angular

The first thing to recommend, of course, is the official Angular Material component library, Material Design is a set of Google’s design system.

Based on this design system, the official and the community have provided various component libraries, including web ( Angular / React / Vue ) and mobile (Android/iOS/Flutter).

Among them, the Angular version of the Material component library is now officially designated by Angular, so the audience is particularly large, whether it is the number of Star/Fork on Github or the number of weekly downloads in NPM, it is TOP 1.

The following is the data on April 19, 2021:

index	Numerical value
Star	21.4k
Fork	5.7k
NPM weekly download	891,480

Material Design for Angular released the first Alpha version based on Angular 2 as early as March 2016: 2.0.0-alpha.0 , which evolved for more than a year, and the official version 2.0 was not released until December of the second year. Released the official version 5.0.0 based on Angular 5.

However, Material Design for Angular is not the earliest Angular component library. PrimeNG, which we will introduce later, was born earlier than it, but Material is undoubtedly the most popular and most popular.

2. NG/NGX Bootstrap

Bootstrap is an open source toolkit for front-end development launched by Twitter. It is also a very popular HTML/CSS/JS framework for developing responsive layouts and mobile device-first web applications.

How popular is it? We can see by looking at a set of data.

Framework/library	Star number
Vue	182k
React	167k
Bootstrap	149k
Angular	72.5k

From the above data, it can be seen that Bootstrap is even more than the number of Stars in the Angular framework, which shows the popularity of Bootstrap, so it is not difficult to imagine that the Angular component library based on Bootstrap is also very popular.

There are two main Angular component libraries based on Bootstrap:

• NG Bootstrap
• NGX Bootstrap

NG Bootstrap and NGX Bootstrap are two different projects of two different project teams. Both of them can be used in Angular using Bootstrap without using jQuery. The main difference is the version of Bootstrap they support:

• NGX Bootstrap supports Bootstrap 3 and 4
• NG Bootstrap supports Bootstrap 4 and requires Angular5+

From the perspective of Github Star/Fork and NPM weekly downloads, they are also equivalent, and NG Bootstrap seems to have the upper hand:

index	NG Bootstrap	NGX Bootstrap
Star	7.7k	5.3k
Fork	1.4k	1.7k
NPM weekly download	386,485	235,662

Judging from the release time of the version, NGX Bootstrap is earlier:

index	NG Bootstrap	NGX Bootstrap
First release version	1.0.0-alpha.0 July 2016	1.0.1-beta.2 January 2016
The first official version	1.0.0 January 2018	1.0.4 February 2016

From the above data, it can be seen that NGX Bootstrap is earlier than NG Bootstrap regardless of whether it is the first release version or the first official version. Especially when the first official version is released, NGX Bootstrap is two years earlier than NG Bootstrap.

Therefore, we can roughly understand that NGX Bootstrap is an older library and can support Angular 2+ and Bootstrap 3+, while NG Bootstrap is relatively new and requires Angular 5+ and Bootstrap 4+ to use it.

If your project is a new project using Angular 5+ and Bootstrap 4+, it is recommended to use NG Bootstrap, otherwise use NGX Bootstrap.

3. NG Zorro

The third Angular component library to be recommended is NG Zorro component library Ant Design design system.

Ant Design is a design language of Ant Financial. After many years of iteration and accumulation, its UI design philosophy has become a set of de facto standards. It is sought after and loved by many front-end developers and enterprises, and it is also in the hands of React developers. The magic weapon.

As the Angular implementation of Ant Design, NG Zorro not only inherits the unique ideas and ultimate experience of Ant Design, but also combines the advantages and features of the Angular framework. The style of the component is kept in sync with the latest version of Ant Design, and the interface of the component is also as consistent as possible with the React version of Ant Design.

Say that Zorro is the most popular Angular component library in China, I believe no one will object.

August 2017, Zorro official open source and released the first version: 0.5.0-rc.0 , after a year of evolution, released version 1.0 in June next year.

, Zorro’s community response is very good: 1607e6debbdab8 https://www.zhihu.com/question/63992236

The following is the data on April 19, 2021:

index	Numerical value
Star	7.4k
Fork	2.6k
NPM weekly download	35,941

4. Nebular

Nebular is a customizable Angular UI library, based on the Eva Design design specification, including more than 40 UI components, 4 visual themes, authentication and security modules.

Nebular contains not many components, only 40+, but it contains many practical tools, such as: theme packages, login authentication, role authentication management, Admin system, etc.

If there is a demand for this, you can still try it.

The release time of Nebular is very close to that of Zorro. Both released the first version in August 2017 and the first official version the following year. However, from the perspective of Github Star/Fork and NPM weekly downloads, Nebular is slightly inferior. :

index	Numerical value
Star	7k
Fork	2.6k
NPM weekly download	17,037

5. PrimeNG

Next, the recommended PrimeNG is also a foreign Angular component library. This is an old-brand Angular component library. The first version was released in February 2016, and the release time was earlier than the official Material.

PrimeNG has very rich components, with a total of 90+ components, which may be the most comprehensive Angular component library on the market.

The following is PrimeNG's data:

index	Numerical value
Star	6.7k
Fork	3.3k
NPM weekly download	260,712

6. Clarity

Clarity is also an Angular component library with its own design system, based on the Clarity Design design language, which Clarity Design , but it is a different product from a different company.

index	Numerical value
Star	6.2k
Fork	701
NPM weekly download	18,014

7. DevUI

The last thing to recommend is a domestic emerging Angular component library called DevUI , based on the DevUI Design design language.

DevUI is an open source front-end solution for enterprise middle and back-end products. It advocates immersion, flexible, and simple. It encourages designers to serve real needs and designs for most people, rejecting grandstanding and pleasing the eye. the design of.

DevUI is hatched from the Huawei Cloud DevCloud R&D tool system. It is most suitable for ToB tool products, because these products do not pursue cool styles, but are more concerned about whether the tools are stable and efficient to use, and whether they can really let users Forget the tools and reach the state of flow in the process of using the tools.

Because DevCloud is a R&D tool product with rich scenarios, this makes DevUI incubated in it has its own unique advantages. DevUI provides many characteristic components that other UI component libraries do not have, such as Gantt chart , quadrant , And the newly classification search , wizard navigation and so on.

DevUI has been used in many DevCloud businesses since the beginning of 2017. After many years, DevUI has withstood the test of DevCloud's large number of online users and has become a stable, efficient, and smooth experience of Angular component library.

If you are developing ToB of tools products, DevUI would be a very good choice!

index	Numerical value
Star	638
Fork	106

join us

We are the DevUI team, welcome to come here to build an elegant and efficient man-machine design/development system with us. Recruitment email: [e-mail].

Text/DevUI Kagol

Recommendations of previous articles

"How do we know if users like our new features? 》

"Teach you to build your own Angular component library"

"Teach you how to use the quadrant chart component"