Post originally written by me in spanish here: Mejores librerías Angular
As in many frameworks, around Angular there is also an ecosystem of libraries created by the community, the most common is component libraries. In the following list I will show you the ones I personally found most interesting. The list does not follow any particular order.
I recommend using the minimum number of libraries that are really needed, since you lose control of the components of your application, and you depend on the developer of the library to maintain those components.
PrimeNG
Collection of many components also prepared for mobile. It has certain themes that you can choose to customize the appearance of the components.
It has data display components (tables, graphs, statistics, etc), to many types of panels, buttons, menus, even has a drag and drop component, so you won't have to look for another library for this functionality.
NG Bootstrap
If you want to use Bootstrap together with Angular, you can use Bootstrap directly as you would on any normal page. The problem with this is that the parts of Bootstrap that use JS will not work for you, because they use Jquery, and it is not adapted for Angular. If you need to use the JS components of Bootstrap the best thing you can do is to use this library.
The library contains many of the Bootstrap components adapted to Angular, so for example, you can use the Bootstrap dropdown without having to do weird things.
Angular material
Lately the design Material based on Google is very fashionable and this library puts it to our reach to use with Angular.
As with the previous libraries it is a wide set of ready-to-use components. These components have the particularity that their design is inspired by the Material design.
Like PrimeNG it offers a variety of components, although it does not offer many components for data visualization.
NGX Admin
If we want to include a control panel in our web application, the easiest and fastest way is to use these components for their creation.
It comes with two color themes, one light and one dark. In its official website you can see an example of a control panel already in operation using these components, as you can see although it is focused on a control panel, it comes with a variety of components.
Ngrx
This library is essential for large applications, and is used to manage the status of the web application in a single point called store.
This system also allows to share data between components and helps to make large applications maintainable.
NG animate
Small animations to use in the components of Angular. Although Angular comes with a system to create our own animations, there is a library that creates these animations for us.
Although not many animations come, those that come by default are fine for animating components when they are loaded for example.
NGX Charts
A library of specific components of all types of graphs.
The graphs are fully customizable and have a multitude of parameters to adapt to all types of pages.
The types of graphs that are included are the following:
- Horizontal & Vertical Bar Charts (Standard, Grouped, Stacked, Normalized)
- Line
- Area (Standard, Stacked, Normalized)
- Foot (Explodable, Grid, Custom legends)
- Donut
- Gauge
- Linear Gauge
- Force Directed Graph
- Heatmap
- Treemap
- Number Cards
- Bubble/Scatter
Angular notifier
Notifications for Angular. Although you can create your own component to display notifications, that library comes with a few already configured:
- Default
- Success
- Information
- Notice
- Error
In addition the notifications come with animations, can be hidden and are customizable with various parameters.
Dragula
Dragula is a library thought for several frameworks, among them, Angular. It is a library to implement Drag and Drop components and designs, that is to say, interfaces in which the user can move and drag the elements of the page with the mouse or with the finger in smartphones.
Conclusions
There are many more libraries, but I have put those that I personally have found more useful or at least curious. The good thing about Angular is that you don't need to install many libraries to create a project, since Angular, unlike other frameworks, comes by default with everything you need.
Top comments (10)
If you are already using Angular Material, you might as well use the CDK for drag and drop instead of Dragula
Highly recommend the Flex-Layout module. It provides easy to use directives for flex based layouts that are programmable.
Hi, firstly great article. And what if we want customize libraries like primeng by adding new properties? What is the best way to do it?
Normally this type of libraries have a variable @Input to pass from outside of the component certain customizations. If you want to create new theme take a look at this article:
medium.com/@OlegVaraksin/simple-wa...
I actually would like to create my own components by extending the components' class of primeng. Generate my custom component with different selector name but with same properties?
eg. primeng has a component named "p-table"
p-table [value]="value" p-table
I would like to create component with same properties of p-table;
my-custom-component [value]="value" my-custom-component
What do you think about that?
By the way thank you for your answer.
Maybe you can use the inheritance of Angular components, although I don't know if you can inherit from component libraries.
Another option is create your component with the same properties as those of the library. Inside your component you call the component of the library with the same parameters.
I can extend the functions of the component but i cannot accually extend the template of it. Is there any way that you know to use the template of the primeng component's template?
Unfortunately, I don't know a way to do that.
Okey thank you.
Just stumbled upon this today and wanted to say that it's a solid list of libraries :) Just out of curiosity, have you ever taken a look at Kendo UI for Angular (telerik.com/kendo-angular-ui/compo...)? This UI library covers a lot of what you have in this article all in one place (data grids, charts, animations, etc.). Would love to hear your thoughts if you have a chance to check it out and/or have any feedback from past experiences!
Great stuff🙏