5 Angular Libraries You Want To Use In Your Project
Tags: angular, frontend, webdev, development
Published: 2024-05-12 03:46:06

Hi devs, today I will share 5 useful Angular libraries with you. I have used these libraries in my projects, making my development faster. I am sure these libraries will make your life easier. So let's see what they are.

## [Angular Code Input](https://www.npmjs.com/package/angular-code-input)

![Angular Code Input](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2dpozxfgbsfdjlytjsep.png)

In our projects, sometimes we use verification codes like OTP for the user verification process. We must manually handle the input verification if we use a normal text box. But if we use this library, input verification can be easily done. Also, this library provides a nice component that adds a nice look to the UI. Clipboard events are supported. So you don't need to create a separate component on your own. This library supports Angular 7 or higher versions only.

## [Angular Gridster 2](https://www.npmjs.com/package/angular-gridster2)

![Angular Gridster](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ii515ci84e8jbg9ue2q.png)

When creating a dashboard we display different different cards. Sometimes we want to add drag and drop, resizeable features. Also, it should be responsive. It is a very time-consuming task to handle these things manually. In that case, this library comes into play. Angular Gridstar has all these features. You can create a nice dashboard using this library. It has many options. You can see a demo of this library from [this link](https://tiberiuzuld.github.io/angular-gridster2/)

## [Ngx Markdown](https://www.npmjs.com/package/ngx-markdown)

![Ngx Markdown](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1k0k64ma1n3fclh03n9l.png)

If you looking for a markdown editor for your Angular project, this is for you. This library provides a markdown editor with features like syntax highlighting, mathematics expression support, emoji support, chart and diagram visualization. This library provides many options to customize its behavior. Also, there is a [demo project](https://github.com/jfcere/ngx-markdown/tree/master/demo) available to play with this library.

## [Ng2 Charts](https://www.npmjs.com/package/ng2-charts)

![Ng2 Charts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rryji6ems0xjgkgadyc6.png)

A great library for data visualization in Angular. This library provides a variety of charts like bar charts, pie charts, scatter plots, line charts, etc. This library is based on chart.js. So you can use any of the charts in chart.js library with your Angular project. you can see a library demo from [this link](https://valor-software.com/ng2-charts/).

## [NGX Cookie Service](https://www.npmjs.com/package/ngx-cookie-service)

![NGX Cookie Service](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9isqsny4ymk8etx9booa.png)

This library provides a service to handle cookies easily in Angular. This library works as an Angular service. You can perform read, set, and delete operations for cookies using this library. Also, this library supports server-side rendering. Install the library, then inject it into the component. That's it now you can use this as a regular Angular service.

---

That's all for now. Try these libraries in your projects. See you from another blog. Happy Coding!. If you found this blog helpful, don't forget to give a like. 


<a href="https://www.buymeacoffee.com/hirushafernando" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/yellow_img.png" alt="Buy Me A Coffee" style="height: 71px !important;width: 204px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>



You can connect with me on [https://hirushafernando.com/](https://hirushafernando.com/)