@myrmidon/ngx-tools NPM

NgxTools

This project was generated using Angular CLI version 19.0.0. It originates from NgTools while also renaming it.

My essential, general-purpose tools for Angular applications.

These are the typical services and tools shared by most of my Angular apps. For convenience, I packed them into a single reusable library having no dependencies other than Angular CommonModule.

directives:
- autoFocus
pipes:
- colorToContrast: get contrast color from color.
- ellipsis: smart-cut a text.
- flat-lookup: return a human-friendly string from some lookup value.
- joinPipe: join an array into a string.
- safeHtml: HTML pipe to embed HTML code into a page.
- stringToColor: converts a string to a color. The same string will always return the same color.
services:
- EnvService: service providing "environment" variables from unbundled file env.js.
- ErrorService
- LocalStorageService
- RamStorageService
- WindowRefService
validators:
- NgxToolsValidators
general: deep copy function, Roman numbers bidirectional converter.

Using EnvService

The root-injected EnvService service includes a Map with environment settings (name=value pairs, both being strings). These settings get automatically loaded by this service on its initialization, from a specific data member named __env of the global window object, so that you can define all these settings in a separate, unbundled pure JS file.

This file is named env.js under folder public (or src/assets in older apps), included in the scripts of the index.html page of the Angular app. This way you can easily change settings without having to rebuild the app, especially when containerizing it as a Docker image. In this case you can use a volume bind, where the host-specific env.js from local file system replaces the one inside the container, providing all the settings for that specific server environment.

👉 To use this service:

add env.js to your app's public folder.
ensure this script is added to angular.json scripts (env.js under architect/build/options/assets); usually this is already implied by the default glob pattern including all the files in public.
ensure to include env.js in the head of your index.html, BEFORE any other script:

<script src="env.js"></script>

The env.js file should include all your environment-dependent settings, e.g.:

(function (window) {
  window.__env = window.__env || {};
  window.__env.apiUrl = 'http://localhost:60200/api/';
  // ... etc.
}(this));

History

2.0.0

2025-05-29: ⚠️ upgraded to Angular 20.

1.0.3

2025-04-11: added dynamic focus service.

1.0.2

2025-03-12: added replace string pipe.

1.0.1

2024-12-19: ⚠️ use singleton for EnvService removing the need for EnvServiceProvider. This is strictly a breaking change, but in the end all what you need to do is just remove EnvServiceProvider from the providers array of your app. The rest of the code will work as before, because the same EnvService will be injected and also properly initialized.