Angular Lib: Utilities

In this section you can find utilities that focus on a specific but recurring need during web application development.

• angularfire is the official Angular library for Firebase. It offers a wrapper to use the various features of Firebase in a way that suits Angular conventions. With this library easily add complex modules such as authentication, databases, real-time, monitoring, advertising and more... angularfire
• angular/cdk is the official components infrastructure for Angular made by the Angular team. The CDK is a very useful library that helps you author custom UI components with common interaction patterns such as layout responsiveness, scrolling, accessibility... angular/cdk
• ngx-feature-toggle is an Angular module to manage feature toggles in applications using a standardized way. ngx-feature-toggle
• ng-feature-flags is another Angular library that makes it easy to create feature flags in a standardized way. ng-feature-flags
• ng-keyboard-shortcuts is an Angular module that provides a declarative API using components/directive to manage keyboard shortcuts in scalable way. ng-keyboard-shortcuts
• angular2-hotkeys is another library that helps the integration of combination of keyboard shortcuts in Angular applications. angular2-hotkeys
• ngneat/hotkeys is another library that wants to facilitate the creation of shortcuts in your app thanks to a customizable hotkeys directive and service. ngneat/hotkeys
• ngx-template-streams is a library for declarative use of event, such as native DOM events, or component outputs in a reactive way using observable. ngx-template-streams
• ng-dynamic-component is a library which allows to use dynamic components with full life-cycle support for inputs and outputs. ng-dynamic-component
• property-watch-decorator is a library that provides a OnChange decorator that can be easily used to listen to changes of class properties. property-watch-decorator
• angular-formatter-parser provides an option to hook into the value flow of inputs and other "editable" html elements. It's an ideal tool to format inputs such as adding spacing to phone number or credit card. angular-formatter-parser
• ngx-route-params-input allows to use angular router params and query params as component input easily with less boilerplate code. ngx-route-params-input
• ng-effects is a library which allows to write more reactive code in Angular. ng-effects
• ng-polymorpheus is a tiny library for polymorphic templates in Angular. It helps writing data-agnostic and design-agnostic components so it will help your team to write more generic and reusable components. ng-polymorpheus
• ngx-responsive is a library which contains a superset of responsive directive in order to show or hide items according to the size of the device screen or according to the device informations. ngx-responsive
• ng-event-bus is a RxJS-based message bus service for Angular. It helps to centralize communication between all the services and components of an app. ng-event-bus
• ngx-dynamic-hooks is a utility for automatically inserting live Angular components into a dynamic string of content and render the result in the DOM. ngx-dynamic-hooks
• workers is a small library with great advantage, in fact it offers a comfortable use of the Web Workers API. workers
• flex-layout is an official Angular library that provides HTML UI layout for Angular applications using Flexbox and a Responsive API. flex-layout
• angular-hmr is a library that provides hot module reloading for Webpack and Angular. It allows to improve development experience for instance by preserving state during the refreshing. From Angular 11 this package is no longer useful because HMR was introduced in Angular CLI. angular-hmr
• observable-webworker is a library that offers a simplified reactive API for working with Web Workers. observable-webworker
• ng-web-apis/speech is a library for using Web Speech API with Angular. ng-web-apis/speech
• ng-web-apis/permissions is a library for using Permissions API in Angular applications. ng-web-apis/permissions
• runtime-config-loader is a library that provides an easy way to integrate a runtime configuration through a json file into your Angular application. runtime-config-loader
• ngx-device-detector is an utility library that provides a simple way to detect the device, OS, and browser details... ngx-device-detector
• ngx-reexportr is a simple angular directive similar to NgRx/component that allows re-exports a given observable input as a new variable. ngx-reexportr
• ngneat/overview is a a set of functions aimed to make Angular views more modulable, scalable, and maintainable: dynamicView is a directive to render a component dynamically. teleportOutlet is a directive to render a view at a different location from its declaration. createComponent is a service method that allows to instantiate a component programatically and inject it in the DOM or in a third-party library. ngneat/overview
• ng2-idle is an utility library aimed to manage inactive users in Angular applications. ng2-idle

Pipes, Directives & Decorators

• ngx-pipes is a collection of useful pipes for Angular with no external dependencies. The lib is divided in different modules so you can either add the whole or only the types of pipes you need.ngx-pipes
• safe-pipe is an Angular pipe intended to sanitize your dangerous content. In fact, the pipe takes as parameter the type of content which can be either html, css, script or url and will return secure content as a result. safe-pipe
• ng-inline-svg is an Angular directive for inserting an SVG file inline within an element. ng-inline-svg
• ngx-date-fns is a library based on the modern date-fns library and offers an Angular pipe for displaying date and time in a convenient way. ngx-date-fns
• ngx-moment is a library that provides a set of useful moment.js pipes for Angular. ngx-moment
• luxon-angular is a collection of date/time pipes for Angular based on Luxon, a powerful, modern, and friendly wrapper for Javascript dates and times. luxon-angular
• ngneat/helipopper is a wrapper for tippyjs that provides a directive called tippy and let you create powerful and customizable tooltips, menus, dropdowns and popover for your applications. ngneat/helipopper
• ng2-tooltip-directive is another library to facilitate the creation of tooltip in Angular via a simple directive called tooltip. ng2-tooltip-directive
• ngneat/from-event is a tiny library that provides a decorator called FromEvent intented to be used with the regular ViewChild or ContentChild from the Angular framework in order to directly map UI events into an RxJS stream without having to write the regular boilerplate for doing that. ngneat/from-event
• ngneat/copy-to-clipboard is another tiny library made by ngneat that provides a single directive called copyToClipboard intended to simplify the copy text from a web application. ngneat/copy-to-clipboard
• ng-directives is a collection of directives that can be used in different scenarios for instance for showing a delta value arrow, a full-screen switch button, a conditionnal element based on permissions or a highlight a text. ng-directives

Mixed utilities

In this section you can find various utilities that offer several types of unrelated extensions. The developer probably preferred to collect his work in a single repository to facilitate the work of maintaining his work.

• ng-helpers is a library that provides various helpers (fragment component, NgRX helpers) for working with Angular projects that speed up the development or solve tricky problems. ng-helpers
• mindspace-utils is a library that provides various helpers (untilViewDestroyed, switchCase, eventBus) for working with Angular projects that allows to write cleaner code. mindspace-utils
• ngrx-utils is a library that provides various utils (routerLinkMatch, push pipe, let directive) for working with Angular projects ngrx-utils
• rx-angular is a library that provides a set of helpers (Reactive Component State, Reactive Template Rendering) for handling fully reactive Angular applications with the main focus on runtime performance and template rendering.rx-angular
• wishtack-steroids is a library that provides various helpers (reactive-component-loader, rx-scavenger, scam schematics...) wishtack-steroids
• ng-stack contains several projects such as a contenteditable directive for making any HTML tag editable, api-mock for helping the development of tests and finally a form wrapper for stronger typings. ng-stack
• herodevs-packages is a set of packages made by the company HeroDevs a group of expert-level Angular/frontend consultants. herodevs-packages
• myndpm/open-source is a set of libraries made open-source by the company called Mynd. At the moment there is only one library called dyn-forms that is aimed to be an abstract layer to easily generate dynamic forms for Angular. myndpm/open-source
• ngx-betalabs is a small repository that contains utility files for working with Angular. For instance you will find an implementation of the famous take-until-destroy and also another utility function called observable-input. ngx-betalabs
• trellisorg/platform is a set of tools made open-source by the company called Trellis. You will find inside the repository a lot of very interesting libraries related to Angular, NX, NgRx and even Nest. trellisorg/platform
• daffodil/packages is a set independent packages related to ecommerce released by Graycore during the development of their Angular Ecommerce PWA Framework called Daffodil. https://github.com/graycoreio/daffodil#packages
• ngx-lib-workspace contains utilities in particular to style an Angular application. https://github.com/abdulnijamudeen/ngx-lib-workspace