In this post, I want to share some of my personal favorites libraries that I use on a regular basis.

This is my top 10 list of Angular libraries that I use on a regular basis. I’ve tried to include libraries that are useful for a wide range of applications.

📍 This list is not ordered by importance.

📍 If you have any suggestions, please let me know in the comments. 👇

1) @ngneat/hot-toast

This is a library for creating toast notifications in Angular applications. Toast notifications are small pop-up messages that appear briefly on the screen to inform the user of an event or action.

To install it, simply run:

ng add @ngneat/hot-toast

2) ngx-progressbar

This library provides an easy way to add progress bars to your Angular applications. You can customize the appearance and behavior of the progress bars to suit your needs.

To install it, simply run:

npm install ngx-progressbar

Alternatively, you can use @ngx-loading-bar/core

3) ngx-quill

This library allows you to easily add a rich text editor to your Angular applications using the Quill library. It provides a wide range of formatting options and customizable behavior.

To install it, simply run:

npm install ngx-quill

4) @ngneat/cashew

A flexible and straightforward library that caches HTTP requests in Angular.

• ✅ HTTP Caching
• ✅ State Management Mode
• ✅ Local Storage Support
• ✅ Handles Simultaneous Requests
• ✅ Automatic & Manual Cache Busting
• ✅ Hackable

A flexible and straightforward library that caches HTTP requests

To install it, simply run:

npm install @ngneat/cashew

5) ng-zorro-antd

It’s my favorite UI library for Angular. There are many other UI libraries, but I prefer this one because it’s easy to use and has a lot of components. It also has a great documentation.

To install, follow this tutorial

6) fullcalendar

FullCalendar is a popular library for adding a full-featured calendar to your web application. Here are some of the features it provides:

• ✅ A variety of views (day, week, month, etc.)
• ✅ Support for events and resources
• ✅ Customizable time slots
• ✅ Drag-and-drop event creation and rescheduling

To install, follow this tutorial

7) @ngneat/helipopper

A Powerful Tooltip and Popover for Angular Applications. It’s a wrapper around Popper.js, a library for positioning tooltips and popovers.

To install it, simply run:

npm install @ngneat/helipopper @ngneat/overview

8) Akita

Akita is a state management pattern based on object-oriented design principles. Akita is built on top of RxJs, merging the multiple data stores concept from Flux, immutable updates from Redux, and data streams from RxJs to create the Observable Data Store model

To install it, simply run:

npm i @datorama/akita

9) Tailwind CSS

Tailwind must be added to my list of favorite libraries. It’s a utility-first CSS framework for rapidly building custom user interfaces. It’s a great alternative to Bootstrap and other CSS frameworks. It’s easy to use and has a lot of features.

To install it, follow this tutorial

BONUS TIP #1: Tailwind UI is a collection of professionally designed and ready-to-use UI components for Tailwind CSS. It’s a great resource for building your Angular applications.

BONUS TIP #2: https://twuing.dev/ The fastest way to integrate Tailwind UI components into your Angular project. It’s a great tool for quickly adding Tailwind UI components to your Angular applications.

10) ngx-translate

This is a library for internationalization in Angular applications. It provides a simple way to translate your application into multiple languages.

To install it, simply run:

npm install @ngx-translate/core --save

That’s it for my top 10 list of Angular libraries. I hope you found this post useful. If you have any suggestions, please let me know in the comments. 👇