My favorite Angular libraries to use in any project
Tags: angular
Published: 2019-03-08 11:49:22

Post originally written by me in spanish here: [Mejores librerías Angular](https://codingpotions.com/angular-mejores-librerias/)

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

![](https://thepracticaldev.s3.amazonaws.com/i/eci9ngovfscu73qq1oy8.png)

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.

[Official Page](https://www.primefaces.org/primeng/#/)

## NG Bootstrap

![](https://thepracticaldev.s3.amazonaws.com/i/81rajxaxt8z8lp6w562k.png)

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.

[Official Page](https://ng-bootstrap.github.io/#/home)

## Angular material

![](https://thepracticaldev.s3.amazonaws.com/i/ijktdfmul1ld2awtzn7v.png)

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.

[Official Page](https://material.angular.io/)

## NGX Admin

![](https://thepracticaldev.s3.amazonaws.com/i/6mvw5gd5rmzl864a9rc0.png)

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.

[Official Page](http://akveo.com/ngx-admin/)

## Ngrx

![](https://thepracticaldev.s3.amazonaws.com/i/7053jqwdaeub7rdl9m5f.png)

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.

[Official Page](https://github.com/ngrx/platform)

## NG animate

![](https://thepracticaldev.s3.amazonaws.com/i/y94exsx9ajvhrzdnulz9.png)

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.

[Official Page](https://jiayihu.github.io/ng-animate/)

## NGX Charts

![](https://thepracticaldev.s3.amazonaws.com/i/inphwxyelx6zanutmb2d.png)

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

[Official Page](https://swimlane.github.io/ngx-charts/)

## Angular notifier

![](https://thepracticaldev.s3.amazonaws.com/i/ty06qwmby80b26v1894l.png)

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.

[Official Page](https://github.com/dominique-mueller/angular-notifier)

## Dragula

![](https://thepracticaldev.s3.amazonaws.com/i/nrwvxyklktbgbtsj21p2.png)

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.

[Official Page](https://github.com/valor-software/ng2-dragula)

## 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.