DEV Community: Nigro Simone

Smart HTTP Caching in Angular with NgHttpCaching

Nigro Simone — Tue, 03 Mar 2026 16:03:35 +0000

Let’s be honest: how many times does your Angular app hit the same endpoint over and over again?

Multiple components requesting the same data
Identical parallel requests
Users navigating back and forth between routes
The same service invoked multiple times

Result: unnecessary backend load and wasted latency.

NgHttpCaching solves this problem in a clean and predictable way.

It’s an Angular HTTP interceptor that adds configurable, intelligent caching to your HttpClient without changing your architecture.

🚀 How It Works

NgHttpCaching intercepts outgoing HTTP requests and:

Checks if a valid cached response exists
If yes → returns it immediately
If no → sends the request to the backend
When the response arrives → stores it in cache

It also automatically handles simultaneous requests to the same endpoint:

only one real HTTP call is made, and the others subscribe to the same observable.

Clean. Efficient. Deterministic.

✨ Key Features

✅ HTTP caching via interceptor
✅ Handles simultaneous/parallel requests
✅ Automatic garbage collector for expired entries
✅ Automatic cache invalidation on mutations (POST, PUT, DELETE, PATCH)
✅ MemoryStorage, LocalStorage, SessionStorage or custom store
✅ Optional support for cache-control and expires headers
✅ Fully configurable

⚡ Installation

npm i ng-http-caching

With Angular standalone:

import { bootstrapApplication } from '@angular/platform-browser';
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
import { provideNgHttpCaching } from 'ng-http-caching';
import { AppComponent } from './app.component';

bootstrapApplication(AppComponent, {
  providers: [
    provideNgHttpCaching(),
    provideHttpClient(withInterceptorsFromDi())
  ]
});

That’s it. Your GET requests are now cached.

🔧 Configuration

Everything is optional and customizable.

import { NgHttpCachingConfig } from 'ng-http-caching';

const config: NgHttpCachingConfig = {
  lifetime: 1000 * 10, // 10 seconds
  allowedMethod: ['GET', 'HEAD'],
};

Then:

provideNgHttpCaching(config)

🧠 Smart Cache Invalidation on Mutations

Caching is easy. Keeping it consistent is not.

NgHttpCaching includes automatic mutation invalidation strategies:

clearCacheOnMutation: NgHttpCachingMutationStrategy.COLLECTION

Available strategies:

NONE → No automatic invalidation
ALL → Clear the entire cache
IDENTICAL → Clear entries with the same URL
COLLECTION → Clear resource and its parent collection
Custom function → Fully custom logic

Example:

clearCacheOnMutation: (req) => req.url.includes('/api/critical-data')

💾 Persistent Storage

Default storage is in-memory.

But you can switch to:

LocalStorage

import { withNgHttpCachingLocalStorage } from 'ng-http-caching';

provideNgHttpCaching({
  store: withNgHttpCachingLocalStorage()
});

SessionStorage

import { withNgHttpCachingSessionStorage } from 'ng-http-caching';

Custom Store

Implement NgHttpCachingStorageInterface and plug in your own logic.

🏷 Tag-Based Cache Management

You can tag requests:

headers: {
  [NgHttpCachingHeaders.TAG]: 'users'
}

Then clear them later:

ngHttpCachingService.clearCacheByTag('users');

Perfect for domain-specific invalidation scenarios.

🎯 Per-Request Overrides

You can control caching behavior via headers:

X-NG-HTTP-CACHING-ALLOW-CACHE
X-NG-HTTP-CACHING-DISALLOW-CACHE
X-NG-HTTP-CACHING-LIFETIME
X-NG-HTTP-CACHING-TAG

Or override configuration methods using HttpContext.

You can customize:

isExpired
isValid
isCacheable
getKey

Even per request.

🛠 Advanced Example: Safe POST Caching

By default, cache key = METHOD@URL_WITH_PARAMS.

If you want to cache POST/PUT safely, define a custom key:

getKey: (req) => {
  return req.method + '@' +
         req.urlWithParams + '@' +
         JSON.stringify(req.body);
}

Now even mutation requests can be uniquely cached.

🧹 Manual Cache Control

Inject NgHttpCachingService:

constructor(private cache: NgHttpCachingService) {}

Available methods:

clearCache()
clearCacheByKey()
clearCacheByRegex()
clearCacheByTag()
runGc()
getFromCache()

Full control when you need it.

📦 Live Demo

Try it here:

https://stackblitz.com/edit/demo-ng-http-caching-21

Benchmarking PostgreSQL Drivers in Node.js: node-postgres vs postgres.js, who is the faster?

Nigro Simone — Sat, 06 Sep 2025 13:06:10 +0000

TLTR: pg-native wins

When building high-performance Node.js applications with PostgreSQL, choosing the right driver can have a noticeable impact on query latency and throughput. To compare the most popular options, we ran a benchmark using mitata to test three libraries:

pg-native by brianc/node-postgres (C library bindings)
pg (AKA node-postgres) by brianc/node-postgres (standard JavaScript implementation)
postgres (AKA postgres.js) by porsager/postgres (standard JavaScript implementation)

Source code at https://github.com/nigrosimone/postgres-benchmarks

Running benchmarks... --iterations=50000
GC is exposed
Poll size: 10
Dependencies versions:
{
  "pg": "^8.16.3",
  "pg-native": "^3.5.2",
  "postgres": "^3.4.7"
}
Database connectivity verified
clk: ~3.06 GHz
cpu: Intel(R) Core(TM) i7-1065G7 CPU @ 1.30GHz
runtime: node 24.7.0 (x64-linux)

benchmark                       avg (min … max) p75 / p99    (min … top 1%)
----------------------------------------------- -------------------------------
brianc/node-postgres (pg-native) 161.73 µs/iter 159.26 µs   █
                          (113.45 µs … 1.01 ms) 391.13 µs   █
                        (  6.93 kb …   2.07 mb)  11.93 kb ▁▄█▆▃▂▂▂▂▂▁▁▁▁▁▁▁▁▁▁▁

brianc/node-postgres (pg)        183.02 µs/iter 197.19 µs  █
                          (129.61 µs … 1.77 ms) 402.29 µs  █▅▃
                        (  1.80 kb …   1.93 mb)  15.46 kb ▁███▆▅▅▄▃▃▂▂▂▂▁▁▁▁▁▁▁

porsager/postgres (postgres)     202.32 µs/iter 220.90 µs  █
                          (140.51 µs … 1.22 ms) 436.25 µs  █▆▄
                        (  4.90 kb …   1.10 mb)  13.97 kb ▁████▇▆▄▃▃▃▂▂▂▂▁▁▁▁▁▁

summary
  brianc/node-postgres (pg-native)
   1.13x faster than brianc/node-postgres (pg)
   1.25x faster than porsager/postgres (postgres)

pg-native wins

The pg-native driver leverages libpq, the official PostgreSQL C client library. This allows faster query parsing, lower overhead on network I/O, and better memory handling than the pure JavaScript implementation. Essentially, pg-native skips part of the JS-to-database abstraction cost.

pg is close behind

Despite being pure JavaScript, pg (AKA node-postgres) remains very efficient and stable. The performance gap is small and might not be noticeable in real-world apps unless you're processing tens of thousands of queries per second.

Conclusion

For high-throughput Node.js applications where microseconds matter, pg-native consistently outperforms both pg (AKA node-postgres) and postgres (AKA postgres.js). However, the difference isn’t massive — your choice should balance performance, API design, and operational complexity.

Turbo Array: Supercharge Your JavaScript Array Operations 🚀

Nigro Simone — Tue, 04 Feb 2025 19:40:33 +0000

Handling large arrays in JavaScript can sometimes feel sluggish. Methods like .map(), .filter(), some(), every() and .reduce() are powerful but can be inefficient when chained together. What if we could optimize them for performance? Meet Turbo Array, a library designed to supercharge array operations by reducing function calls and optimizing execution under the hood. ⚡

🔥 The Problem: Chained Array Methods Are Slow

When you chain multiple array methods, JavaScript loops through the array multiple times:

const numbers = [1, 2, 3, 4, 5];
const result = numbers
  .filter(n => n % 2 === 0) // Iterates once
  .map(n => n * 2); // Iterates again

console.log(result); // [4, 8]

Each method (.filter(), .map()) creates a new intermediate array, leading to extra memory usage and repeated iterations. Turbo Array solves this by fusing operations into a single optimized function.

🚀 Meet Turbo Array

Turbo Array compiles the entire transformation pipeline into a single efficient function, avoiding unnecessary iterations:

import { turbo } from 'turbo-array';

const turboFn = turbo()
  .filter(n => n % 2 === 0)
  .map(n => n * 2)
  .build();

const result = turboFn([1, 2, 3, 4, 5]);
console.log(result); // [4, 8]

💡 What happens behind the scenes? Instead of looping twice, Turbo Array merges the operations into one optimized function, reducing overhead and boosting performance.

⚡ Performance Boost: How Fast Is It?

Benchmarks show significant speed improvements for large arrays. A simple .filter().map() chain runs 2-5x faster compared to native JavaScript methods.

See live example with benchmark: https://stackblitz.com/edit/turbo-array

📦 Install and Try It Out

Ready to optimize your array operations? Install Turbo Array via npm:

npm install turbo-array

Try it in your next JavaScript project and experience the speed boost! 🚀

Introducing Ultimate Express: The 5x Fastest Drop-In Replacement for Express.js

Nigro Simone — Sun, 20 Oct 2024 15:00:25 +0000

Switching to a faster web server has never been easier. Introducing Ultimate Express, a blazing-fast alternative to Express.js that's fully compatible with both Express 4 and 5 codebases. With just one line of code, you can elevate your Node.js application's performance to new heights.

Seamless Integration

Migrating to Ultimate Express is incredibly simple. Follow these steps:

npm install ultimate-express

Uninstall the standard Express package:

npm uninstall express

Replace all instances of require('express') with require('ultimate-express') in your codebase. That's it!

Performance Comparison

Ultimate Express significantly outperforms many popular Node.js frameworks, as demonstrated by benchmarks using the bun-http-framework-benchmark tool. Below is a comparison of Ultimate Express with other frameworks:

|  Framework           | Average        | Ping          | Query         | Body          |
| -------------------- | -------------- | ------------- | ------------- | ------------- |
| uws                  | 94,296.49      | 108,551.92    | 104,756.22    | 69,581.33     |
| hyper-express        | 66,356.707     | 80,002.53     | 69,953.76     | 49,113.83     |
| ultimate-express     | 57,343.813     | 64,608.03     | 60,234.78     | 47,188.63     |
| h3                   | 35,423.263     | 41,243.68     | 34,429.26     | 30,596.85     |
| fastify              | 33,094.62      | 40,147.67     | 40,076.35     | 19,059.84     |
| hono                 | 26,576.02      | 36,215.35     | 34,656.12     | 8,856.59      |
| koa                  | 24,045.08      | 28,202.12     | 24,590.84     | 19,342.28     |
| express              | 10,411.313     | 11,245.57     | 10,598.74     | 9,389.63      |

Key Features

Compatibility: Ultimate Express maintains full compatibility with Express.js APIs, ensuring a smooth transition without breaking existing code.
Performance: Built on µWebSockets, Ultimate Express leverages optimized routing and other enhancements to achieve up to 11.78x performance improvements in some scenarios.
Ease of Use: Minimal changes required to migrate—simply replace your existing Express package with Ultimate Express.

Differences from Express.js

While Ultimate Express is designed to be a drop-in replacement for Express, there are a few key differences:

Case Sensitive Routing: Enabled by default.
Async Error Handling: Simplified with a new configuration option.
Optimized Body Parsing: By default, the request body is only read for POST, PUT, and PATCH methods.
Enhanced HTTPS Setup: Integrated uWS options directly in the app constructor.

Getting Started

To get stated with Ultimate Express, simply follow the installation steps mentioned above. For more detailed documentation and advanced usage tips, visit the GitHub repository.

Upgrade to Ultimate Express today and unlock the full potential of your Node.js applications with unmatched performance and ease of integration.

Enhancing JSON Serialization Performance in Express.js with express-fast-json-stringify

Nigro Simone — Sun, 29 Sep 2024 19:48:57 +0000

JSON serialization is a critical task in web development, particularly for applications built with Node.js and Express.js. While the native JSON serialization in Node.js (JSON.stringify()) is straightforward and convenient, it can become a performance bottleneck, especially under heavy load. This article introduces express-fast-json-stringify, a custom middleware package that leverages fast-json-stringify to significantly boost JSON serialization performance in Express applications.

What is fast-json-stringify?

fast-json-stringify is a JSON serialization library developed by the Fastify team. It enhances JSON conversion speed by analyzing JSON schema definitions and compiling them into highly optimized serialization functions. This makes it much faster than the native JSON.stringify(), particularly beneficial for high-performance applications.

Introducing express-fast-json-stringify

express-fast-json-stringify is an npm package that brings the performance benefits of fast-json-stringify to Express.js applications. By integrating this package, you can achieve faster JSON serialization, thus improving the overall performance of your application.

Installation

First, install the express-fast-json-stringify package:

npm install express-fast-json-stringify

Creating a JSON Schema

Define a schema object that specifies the structure of your JSON responses. This schema will be used by fast-json-stringify to optimize the serialization process.


import { Schema } from 'express-fast-json-stringify';

const schema: Schema = {
  title: 'Example Schema',
  type: 'object',
  properties: {
    firstName: { type: 'string' },
    lastName: { type: 'string' },
    age: {
      description: 'Age in years',
      type: 'integer',
    },
  },
};

Applying the Middleware

Use the fastJsonSchema middleware in your Express routes, passing the schema object as an argument. This will set up the optimized JSON serialization for that route.

import express, { Request, Response, NextFunction } from 'express';
import { fastJsonSchema, Schema } from 'express-fast-json-stringify';

const app = express();

const exampleSchema: Schema = {
  title: 'Example Schema',
  type: 'object',
  properties: {
    firstName: { type: 'string' },
    lastName: { type: 'string' },
    age: { type: 'integer' },
  },
};

app.get('/', fastJsonSchema(exampleSchema), (req: Request, res: Response, next: NextFunction) => {

});

Sending JSON Responses

Instead of using the default res.json() method, use the res.fastJson() method provided by the middleware to send JSON responses. This leverages the speed benefits of fast-json-stringify.

import { fastJsonSchema, Schema } from 'express-fast-json-stringify';

const schema: Schema = {
  title: 'Example Schema',
  type: 'object',
  properties: {
    firstName: { type: 'string' },
    lastName: { type: 'string' },
    age: {
      description: 'Age in years',
      type: 'integer',
    },
  },
};

app.get('/', fastJsonSchema(schema), (req, res, next) => {
  try {
    const data = {
      firstName: 'Simone',
      lastName: 'Nigro',
      age: 40,
    };
    res.fastJson(data);
  } catch (error) {
    next(error);
  }
});

Performance Benefits

Using express-fast-json-stringify offers several performance benefits:

Increased Speed: fast-json-stringify can serialize JSON data much faster than JSON.stringify(), especially for complex JSON objects.
Reduced CPU Usage: Faster serialization means less CPU time spent on processing, allowing your server to handle more concurrent requests.
Consistency and Validation: By defining JSON schemas, you ensure that the serialized data adheres to a predefined structure, improving data consistency and reducing the likelihood of errors.

Conclusion

Integrating express-fast-json-stringify into your Express.js application can provide substantial performance improvements, especially in scenarios where JSON serialization is a bottleneck. By leveraging the power of fast-json-stringify, you can achieve faster response times and handle higher loads, making your application more efficient and scalable.

To start using express-fast-json-stringify, follow the steps outlined in this article, and enjoy the benefits of faster JSON serialization in your Express applications. For a live demo, you can check out the StackBlitz demo.

Enable / Disable Your Angular UI During Long Tasks with ng-lock

Nigro Simone — Mon, 19 Aug 2024 09:01:34 +0000

Introduction

Ever faced the issue where users click a button multiple times, causing chaos in your application? Meet ng-lock, the Angular library designed to save the day. It offers a straightforward way to lock functions and the user interface while a task is running. This guide will walk you through the installation, basic usage, and customization options of ng-lock.

Why Use ng-lock?

Key Benefits:

Prevents Multiple Clicks: Ensures a function executes only once until it completes, avoiding redundant operations.
User Interface Locking: Disables UI elements to signal an ongoing process, enhancing user experience.
Easy Integration: Simple decorators to lock and unlock functions, reducing boilerplate code.

Installation

Getting started with ng-lock is a breeze. Follow these simple steps to install and set it up in your Angular application.

Step 1: Install ng-lock
Open your terminal and run:

npm i ng-lock

Step 2: Import and Use the Decorators
Here's a basic example to demonstrate how to lock a button click event.

import { Component } from '@angular/core';
import { ngLock, ngUnlock } from 'ng-lock';

@Component({
  selector: 'app-root',
  template: `<button (click)="onClick($event)">Click me!</button>`,
  styles: [`
    button.ng-lock-locked {
      pointer-events: none; 
      border: 1px solid #999999;
      background-color: #cccccc;
      color: #666666;
    }
  `]
})
export class AppComponent {

  @ngLock()
  onClick(event: MouseEvent) {
    // Simulate a long task
    setTimeout(() => {
      console.log("task ended");
      ngUnlock(this.onClick);
    }, 3000);
  }
}

In this example, the button will be locked (disabled) during the simulated long task (3 seconds).

Customizing ng-lock

ng-lock comes with several options to tailor its behavior to your needs. Here’s a deeper dive into the configuration.

Default Configuration

@ngLock({
  maxCall: 1,
  unlockTimeout: null,
  lockClass: 'ng-lock-locked',
  lockElementFunction: ngLockElementByTargetEventArgument(),
  returnLastResultWhenLocked: false,
  debug: false
})
onClick(event: MouseEvent) {
  setTimeout(() => {
    console.log("task executed");
    ngUnlock(this.onClick);
  }, 3000);
}

Options Explained

maxCall: Number of calls before the function is locked. Default is 1.
unlockTimeout: Maximum time in milliseconds to lock the function. Default is null (no timeout).
lockClass: CSS class applied when the method is locked. Default is ng-lock-locked.
lockElementFunction: Function to find the HTML element to apply the lockClass. Default is ngLockElementByTargetEventArgument().
returnLastResultWhenLocked: If true, returns the last result when the method is locked. Default is false.
debug: Logs information to the console if true. Default is false.

Advanced Usage

Using lockElementFunction
You can customize the element that gets locked by defining your lockElementFunction. Here are a few examples:

Lock by Query Selector

@ngLock({
  lockElementFunction: ngLockElementByQuerySelector('.my-class')
})
onClick() {
  setTimeout(() => {
    console.log("task executed");
    ngUnlock(this.onClick);
  }, 3000);
}

Lock by Component Property

@ViewChild("button") button: ElementRef<HTMLElement>;

@ngLock({
  lockElementFunction: ngLockElementByComponentProperty('button')
})
onClick() {
  setTimeout(() => {
    console.log("task executed");
    ngUnlock(this.onClick);
  }, 3000);
}

Additional Utility Functions

ngUnlockAll
Unlocks all methods in a component.

ngUnlockAll(this);

ngIsLock
Checks if a method is locked.

console.log('onClick is locked?', ngIsLock(this.onClick));

Examples

Example with unlockTimeout

@ngLock({
  unlockTimeout: 3000
})
onClick(event: MouseEvent) {
  console.log("task executed");
}

Example with maxCall

@ngLock({
  maxCall: 3
})
onClick(event: MouseEvent) {
  console.log("task executed");
}

onCheck() {
  console.log('onClick lock state:', ngIsLock(this.onClick));
}

onUnlock() {
  ngUnlock(this.onClick);
}

Conclusion

ng-lock is a powerful yet simple library to enhance your Angular applications by controlling function execution and user interface interaction. By using decorators, it allows you to manage function calls efficiently, providing a seamless user experience. Give it a try and make your app smarter and more user-friendly!

Links:

Caricare componenti Angular in maniera lazy senza il routing direttamente dall'HTML

Nigro Simone — Sat, 15 Apr 2023 13:46:30 +0000

Immaginate di avere un componente Angular molto pesante, che ad esempio usa una o più librerie, questo componente inciderebbe molto sul caricamento iniziale dell'applicazione anche se magari non deve essere fin da subito disponibile, perché ad esempio viene utilizzato solo cliccando su un determinato bottone.
In questi casi può essere utile caricarlo in maniera lazy, cioè scaricare il codice necessario al suo funzionamento (HTML, JavaScript e CSS) solo quando realmente necessario e non direttamente nel bundle dell'applicazione.
L'approccio classico in questi casi è quello di destinare una rotta e caricarla in maniera lazy:

const routes: Routes = [{
  path: 'feature',
  loadChildren: () => import('./feature.module').then(m => m.FeatureModule)
}];

Non sempre però è possibile o opportuno creare una rotta specifica, a volte può essere utile poterlo caricare lazy anche senza l'ausilio di una rotta. L'approccio lazy routing di Angular ci suggerisce però la strada per implementare una soluzione lazy inline cioè direttamente da template HTML, utilizzando il metodo import()¹.

Il metodo import() permette di caricare moduli ECMAScript (da non confondere con gli NgModule di Angular) in maniera dinamica, cioè solo quando viene chiamata la funzione e non in maniera statica come avviene normalmente.

Per capire la differenza, immaginiamo di avere ad esempio il seguente modulo ECMAScript:

export const sum = (a, b) => a + b;

possiamo importarlo staticamente in questo modo

import { sum } from './sum';
console.log(sum(1, 2)); // 3

oppure dinamicamente in questo modo

import('./sum').then(module => console.log(module.sum(1, 2)) // 3 );

Notiamo che importando dinamicamente un modulo, dobbiamo attendere che la promise restituita da import() sia risolta prima di poter utilizzare il modulo e quindi i suoi export, questo perché lo script deve essere fisicamente scaricato prima del suo utilizzo, mentre nell'import statico possiamo utilizzarlo immediatamente, perché questo è sin da subito disponibile perché già compilato nel bundle iniziale dell'applicazione che è stato scaricato al primo avvio.
Questo implica che tutti gli import statici contribuiscono ad appesantire il bundle.

Il metodo import() quindi può essere comodo in tutti quei contesti in cui bisogna utilizzare un modulo pesate, che magari viene usato solo in determinati punti dell'applicazione, la cosa interessante è che il modulo sarà scaricato solo la prima volta, per poi essere salvato in cache e quindi nei successivi utilizzi non peserà il tempo di download.

Abbiamo quindi visto come funziona import() e che viene già normalmente usato su Angular per caricare in maniera lazy delle rotte. Analizzando nel dettaglio il caricamento lazy delle rotte Angular:

const routes: Routes = [{
  path: 'feature',
  loadChildren: () => import('./feature.module').then(m => m.FeatureModule)
}];

possiamo notare che a loadChildren viene assegnata una funzione che sarà invocata quando la rotta sarà risolta, questa funzione a sua volta scaricherà il modulo ECMAScript con import('./feature.module') che esporta la classe FeatureModule che è un NgModule, es.:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FeatureRoutingModule } from './feature-routing.module';
import { FeatureComponent } from './feature.component';

@NgModule({
  imports: [
    CommonModule,
    FeatureRoutingModule
  ],
  declarations: [FeatureComponent]
})
export class FeatureModule { }

Possiamo sfruttare quindi questo flusso, per caricare qualsiasi NgModule in maniera lazy per poi creare a runtime i componenti che questo NgModule esporta.

Dobbiamo prima però capire bene, la differenza tra modulo ECMAScript e NgModule, i due costrutti sono concettualmente simili ma hanno implicazioni diverse.
Con un ECMAScript module possiamo isolare del codice ed esportare solo le parti che vogliamo rendere disponibili a chi importerà il modulo, ad esempio in questo modulo:

import { baz } from './baz';
const foo = 1;
const bar = 2;
export { bar, baz }

chi lo importerà utilizzare solo bar e baz che sono esportati con export, ma non potrà utilizzare foo che non viene esportato, da notare inoltre che baz è importata da un altro modulo che la esporta, ma è anche ulteriormente esportata anche da questo modulo.

In un NgModule concettualmente avviene lo stesso processo, abbiamo degli import di ECMAScript module che poi vengono "smistati" all'interno del decoratore @NgModule(), definendo quindi a livello del framework Angular e della su dependencies injection, cosa questo NgModule importa e cosa esporta. Prendiamo questo esempio di NgModule:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyComponent } from './my.component';

@NgModule({
  imports: [CommonModule],
  declarations: [MyComponent],
  exports: [MyComponent]
})
export class MyModule { }

notiamo degli import di ECMAScript module iniziali e un ECMAScript export finale della classe MyModule, ma notiamo anche la presenza del decoratore @NgModule() che altro non è che una funzione che accetta un oggetto in input così definito:

{
  imports: [CommonModule],
  declarations: [MyComponent],
  exports: [MyComponent]
}

ritroviamo quindi alcuni termini familiari come imports e exports che esprimono, come negli ECMAScript module, cosà questo NgModule importerà e cosa esporterà agli altri NgModule che lo importeranno nei loro imports, in più notiamo la presenza del nodo declarations che in Angular definisce cosa potrà essere utilizzato nei template HTML, quindi se ne deduce che:
MyModule in quanto NgModule importa l'NgModule chiamato CommonModule (che contiene direttive come NgIf, NgFor, etc.) e esporta il componente MyComponent che potrà quindi essere creato a runtime e dato che è presente anche nelle declarations potrà essere utilizzato anche nel template HTML tramite il suo selettore, ma in quanto ECMAScript module esporta solo la classe MyModule.

Le idee a questo punto potrebbero essere un po' confuse, ma probabilmente andando avanti diventerà tutto più chiaro. Partiamo quindi con il descrivere cosa andremo ad implementare.

L'idea è di avere un componente che chiameremo <lazy-load></lazy-load> che si preoccuperà di caricare in modo lazy qualsiasi modulo e di creare a runtime il componente desiderato e di iniettarlo nell'HTML nella posizione in cui si trova <lazy-load></lazy-load>. Per far questo, <lazy-load></lazy-load> avrà un @Input() tramite il quale passeremo il metodo da chiamare per caricare il modulo da caricare così come avviene per loadChildren nel routing.

import { Component, Input } from '@angular/core';

export type LazyLoadImporter = () => Promise<{ component: Type<any>, module: Type<any> }>;

@Component({
  selector: 'lazy-load',
  template: ``
})
export class LazyLoadComponent {
     @Input() lazyImporter: LazyLoadImporter;
}

Quindi lazyImporter dovrà essere una funzione che ritorna una promise che a sua volta ritornerà un oggetto composto da un componente Angular e un NgModule, in altre parole, dovrà essere una funzione così definita:

lazyImporter = () => import('./my.module').then(
  // ECMAScript module
  ECMAModule => {
    return { 
      module: ECMAModule.MyModule, // NgModule
      component: ECMAModule.MyComponent // Componente
    }
  }
);

Quindi implementiamo ngOnChanges prevedendo un metodo per "caricare" e uno per "scaricare" il componente in base al fatto se l'input lazyImporter sia valorizzato o meno e aggiungiamo nell'HTML del template il contenitore che ospiterà il componente caricato esponendolo con @ViewChild(), mentre una property componentRef conterrà l'istanza del componente creata a runtime e nel costruttore ci facciamo iniettare l'Injector di riferimento per la risoluzione delle dependencies injection:

import { Component, Input, OnChanges, SimpleChanges, ViewChild, ViewContainerRef, ComponentRef, Injector, Type } from '@angular/core';

export type LazyLoadImporter = () => Promise<{ component: Type<any>, module: Type<any> }>;

@Component({
  selector: 'lazy-load',
  template: `
    <!-- contenitore che ospiterà il componente caricato -->
    <ng-container #vcRef></ng-container>
`
})
export class LazyLoadComponent implements OnChanges {

    // template reference al contenitore che ospiterà il componente caricato
    @ViewChild('vcRef', { read: ViewContainerRef }) private vcRef!: ViewContainerRef;

    // metodo per il caricamento lazy
    @Input() lazyImporter!: LazyLoadImporter;

    // istanza del componente creato a runtime
    public componentRef!: ComponentRef<any>;

    // Injector per la risoluzione della dependencies injection
    constructor(private injector: Injector) { }

    ngOnChanges(changes: SimpleChanges) {
      // se cambia l'input lazyImporter
      if (changes.lazyImporter) {
        // se valorizzato carichiamo il componente altrimenti lo scarichiamo
        if (changes.lazyImporter.currentValue) {
          this.load(changes.lazyImporter.currentValue);
        } else {
          this.unload();
        }
      }
    }

    async load(lazyImporter: LazyLoadImporter) {
      // ... da implementare
    }

    unload() {
      // ... da implementare
    }
}

fatto questo possiamo concentrarci sul metodo load che farà il grosso del lavoro e sul metodo unload:

  async load(lazyImporter: LazyLoadImporter) {
      // distruggiamo eventuali componenti precedentemente creati
      this.unload();

      // scarichiamo l'ECMAScript module
      const result = await lazyImporter();

      // creiamo l'NgModule
      const lazyModuleRef = createNgModule(result.module, this.injector);

      // creiamo il componente all'interno della vista
      this.componentRef = this.vcRef.createComponent(result.component, { ngModuleRef: lazyModuleRef, injector: this.injector });
  }

  unload() {
    // se presente nella vista un componente
    if (this.componentRef) {
      // ripuliamo la vista
      this.vcRef.clear();
    }
  }

Il grosso è fatto, dobbiamo solo risolvere due questioni e cioè la gestione degli @Input() e degli @Output() del componente creato.
Essendo che vogliamo implementare una soluzione quanto più generica possibile, non possiamo "bindare" uno ad uno tutti gli input e gli output ma dobbiamo trovare una soluzione di "comodo", cioè avere un unico @Input() e un unico @Output().

Partiamo dall'input. Prevediamo una property componentInput che sarà un Record<string, any> (quindi un oggetto chiave/valore), dove la chiave sarà la proprietà in input del componente caricato e il valore il valore da settare all'input. Per fare questo costruiremo l'input come un setter che ad ogni cambiamento chiamerà un nostro metodo setInput() che per per ogni chiave del record setterà sul componente l'input di riferimento con l'API di Angular setInput()²:

  private _componentInput!: Record<string, any>;
  // input unico per valorizzare tutti gli input
  @Input()
  set componentInput(value: Record<string, any>) {
    this._componentInput = value;
    this.setInput();
  }

  private setInput() {
    // se abbiamo il componente e gli input
    if (this.componentRef && this._componentInput) {
      // per ogni chiave del record
      for (const property in this._componentInput) {
        // settiamo sul componente l'input
        this.componentRef.setInput(property, this._componentInput[property]);
      }
    }
  }

Ora è il turno dell'output. Anche in questo caso prevediamo una property unica componentOutput che emetterà un Record<string, any> (quindi un oggetto chiave/valore), dove la chiave sarà la proprietà in output del componente caricato e il valore, il valore emesso dall'output. Accumuliamo però tutte le sottoscrizioni in un array per prevedere una routine unica di unsubscribe da chiamare all'occorrenza:

  // output unico per dispacchare tutti gli output
  @Output() componentOutput: EventEmitter<LazyLoadOutput> = new EventEmitter();

  // array di sottoscrizioni
  private subOutput: Array<Subscription> = [];

  private setOutput() {
    // disiscriviamo tutte le sottoscrizioni
    this.unsubscribe();
    // se abbiamo il componente
    if (this.componentRef) {
      // per ogni property
      for (const property in this.componentRef.instance) {
        const compRefProp = this.componentRef.instance[property];
        // se la property è di tipo  EventEmitter
        if (compRefProp instanceof EventEmitter) {
          this.subOutput.push(
            // la sottoscriviamo e emettiamo l'output
            compRefProp.subscribe((value) =>
              this.componentOutput.emit({ property: property, value: value })
            )
          );
        }
      }
    }
  }

  private unsubscribe() {
    // disiscriviamo tutte le sottoscrizioni
    for (const subOutput of this.subOutput) {
      subOutput.unsubscribe();
    }
  }

L'interfaccia LazyLoadOutput sarà quindi un Record<string, any> di base, ma daremo la possibilità tramite definizione del generic di associare il corretto valore e la corretta property, estraendo le property dal componente caricato e facendo inferenza sull'EventEmitter per estrarre il valore emesso:

type ExtractEventEmitter<P> = P extends EventEmitter<infer T> ? T : never;
export type LazyLoadOutput<T = Record<string, any>> = {
  property: keyof T;
  value: ExtractEventEmitter<T[keyof T]> | any;
};

A questo punto rimettiamo mano al meto load() ed aggiungiamo anche lì una chiamata a setInput() e a setOutput() così da avere tutto ben inizializzato già dopo la fase di creazione del componente:


  async load(lazyImporter: LazyLoadImporter) {
    // distruggiamo eventuali componenti precedentemente creati
    this.unload();

    // scarichiamo l'ECMAScript module
    const result = await lazyImporter();

    // creiamo l'NgModule
    const lazyModuleRef = createNgModule(result.module, this.injector);

    // creiamo il componente all'interno della vista
    this.componentRef = this.vcRef.createComponent(result.component, {
      ngModuleRef: lazyModuleRef,
      injector: this.injector,
    });

    // settimao gli input 👇
    this.setInput();
    // sottoscriviamo gli output 👇
    this.setOutput();
  }

Il nostro componente e ormai terminato, non dimentichiamoci però sull'OnDestroy di disiscrivere le sottoscrizioni:

  ngOnDestroy(): void {
    this.unsubscribe();
  }

Ora, possiamo chiudere con una piccola ma importante modifica. Da Angular 15 sono stati introdotti i componenti standalone che non prevedono la creazioni di un NgModule. Rendiamo quindi opzionale la presenza del module nell'interfaccia LazyLoadImporter:

export type LazyLoadImporter = () => Promise<{
  component: Type<any>;
  // module opzionale 👇
  module?: Type<any>;
}>;

e rendiamolo opzionale anche nel metodo load():

 async load(lazyImporter: LazyLoadImporter) {
    // distruggiamo eventuali componenti precedentemente creati
    this.unload();

    // scarichiamo l'ECMAScript module
    const result = await lazyImporter();

    // creiamo l'NgModule se presente 👇
    const lazyModuleRef = result.module
      ? createNgModule(result.module, this.injector)
      : undefined;

    // creiamo il componente all'interno della vista
    this.componentRef = this.vcRef.createComponent(result.component, {
      ngModuleRef: lazyModuleRef,
      injector: this.injector,
    });

    // settimao gli input
    this.setInput();
    // sottoscriviamo gli output
    this.setOutput();
  }

Il codice finale sarà quindi:

import {
  Component,
  ComponentRef,
  createNgModule,
  EventEmitter,
  Injector,
  Input,
  OnChanges,
  OnDestroy,
  Output,
  SimpleChanges,
  Type,
  ViewChild,
  ViewContainerRef,
} from '@angular/core';
import { Subscription } from 'rxjs';

export type LazyLoadImporter = () => Promise<{
  component: Type<any>;
  module?: Type<any>;
}>;

type ExtractEventEmitter<P> = P extends EventEmitter<infer T> ? T : never;
export type LazyLoadOutput<T = Record<string, any>> = {
  property: keyof T;
  value: ExtractEventEmitter<T[keyof T]> | any;
};

@Component({
  selector: 'lazy-load',
  template: `
    <!-- contenitore che ospiterà il componente caricato -->
    <ng-container #vcRef></ng-container>
`,
  standalone: true,
})
export class LazyLoadComponent implements OnChanges, OnDestroy {
  // template reference al contenitore che ospiterà il componente caricato
  @ViewChild('vcRef', { read: ViewContainerRef })
  private vcRef!: ViewContainerRef;

  // metodo per il caricamento lazy
  @Input() lazyImporter!: LazyLoadImporter;

  // output unico per dispacchare tutti gli output
  @Output() componentOutput: EventEmitter<LazyLoadOutput> = new EventEmitter();

  private _componentInput!: Record<string, any>;
  // input unico per valorizzare tutti gli input
  @Input()
  set componentInput(value: Record<string, any>) {
    this._componentInput = value;
    this.setInput();
  }

  // istanza del componente creato a runtime
  public componentRef!: ComponentRef<any>;

  // array di sottoscrizioni
  private subOutput: Array<Subscription> = [];

  // Injector per la risoluzione della dependencies injection
  constructor(private injector: Injector) {}

  ngOnChanges(changes: SimpleChanges) {
    // se cambia l'input lazyImporter
    if (changes.lazyImporter) {
      // se valorizzato carichiamo il componente altrimenti lo scarichiamo
      if (changes.lazyImporter.currentValue) {
        this.load(changes.lazyImporter.currentValue);
      } else {
        this.unload();
      }
    }
  }

  ngOnDestroy(): void {
    this.unsubscribe();
  }

  async load(lazyImporter: LazyLoadImporter) {
    // distruggiamo eventuali componenti precedentemente creati
    this.unload();

    // scarichiamo l'ECMAScript module
    const result = await lazyImporter();

    // creiamo l'NgModule se presente
    const lazyModuleRef = result.module
      ? createNgModule(result.module, this.injector)
      : undefined;

    // creiamo il componente all'interno della vista
    this.componentRef = this.vcRef.createComponent(result.component, {
      ngModuleRef: lazyModuleRef,
      injector: this.injector,
    });

    // settimao gli input
    this.setInput();
    // sottoscriviamo gli output
    this.setOutput();
  }

  unload() {
    this.unsubscribe();
    // se presente nella vista un componente
    if (this.componentRef) {
      // ripuliamo la vista
      this.vcRef.clear();
    }
  }

  private setInput() {
    // se abbiamo il componente e gli input
    if (this.componentRef && this._componentInput) {
      // per ogni chiave del record
      for (const property in this._componentInput) {
        // settiamo sul componente l'input
        this.componentRef.setInput(property, this._componentInput[property]);
      }
    }
  }

  private setOutput() {
    // disiscriviamo tutte le sottoscrizioni
    this.unsubscribe();
    // se abbiamo il componente
    if (this.componentRef) {
      // per ogni property
      for (const property in this.componentRef.instance) {
        const compRefProp = this.componentRef.instance[property];
        // se la property è di tipo  EventEmitter
        if (compRefProp instanceof EventEmitter) {
          this.subOutput.push(
            // la sottoscriviamo e emettiamo l'output
            compRefProp.subscribe((value) =>
              this.componentOutput.emit({ property: property, value: value })
            )
          );
        }
      }
    }
  }

  private unsubscribe() {
    // disiscriviamo tutte le sottoscrizioni
    for (const subOutput of this.subOutput) {
      subOutput.unsubscribe();
    }
  }
}

Non manca che provarlo sul campo, quindi creiamo un nuovo componente da caricare lazy:

// test.component.ts
import { Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
  selector: 'test',
  template: ` ciao {{name}}! <button (click)="saluta.emit('Ciao sono ' + name)">Saluta</button>`,
  standalone: true,
})
export class LazyLoadComponent {
  @Input() name: string = '';
  @Output() saluta = new EventEmitter();
}

e andiamolo a caricare

import 'zone.js/dist/zone';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';
import {
  LazyLoadComponent,
  LazyLoadImporter,
  LazyLoadOutput,
} from './lazy-load.component';

// Con import type importiamo solo le definizioni e non il modulo.
// Typescript in fase di transpilazione rimuoverà completamente l'istruzione
import type { TestComponent } from './test.component';

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule, LazyLoadComponent],
  template: `
    <lazy-load 
      [lazyImporter]="lazyImporter" 
      [componentInput]="{name}"
      (componentOutput)="onComponentOutput($event)"
    ></lazy-load>
  `,
})
export class App {
  lazyImporter: LazyLoadImporter = () =>
    import('./test.component').then((m) => ({
      component: m.TestComponent,
    }));

  public name = 'Simone';

  onComponentOutput(event: LazyLoadOutput<TestComponent>) {
    alert(`L'output "${event.property}" ha emesso "${event.value}"`);
  }
}

bootstrapApplication(App);

Prova su stackblitz

Per concludere, ho realizzato anche un libreria https://www.npmjs.com/package/ng-lazy-load-component che mette a disposizione un componente generico per il caricamento lazy di componenti, la libreria mette a disposizione qualche altra feature interessante, il codice è anche disponibile su GitHub https://github.com/nigrosimone/ng-lazy-load-component

Come creare in Angular una direttiva per dichiarare variabili nei template HTML dei componenti

Nigro Simone — Mon, 04 Apr 2022 20:14:03 +0000

A volte sarebbe utile poter dichiarare variabili nei template HTML dei componenti, ad esempio, immaginiamo di avere un osservabile, il cui valore va visualizzato in più punti del nostro template, una delle possibili soluzioni è quella di sottoscrivere più volte l'osservabile, usando la pipe async, degradando però le performance a causa delle molteplici sottoscrizioni:

import { Component } from '@angular/core';
import { Observable, timer } from 'rxjs';

@Component({
  selector: 'app-root',
  template: `
    <ul>
      <li>{{ timer$ | async }}</li><!-- prima sottoscrizione -->
      <li>{{ timer$ | async }}</li><!-- seconda sottoscrizione -->
    </ul>
  `,
})
export class AppComponent {
  public timer$: Observable<number> = timer(3000, 1000);
}

oppure si potrebbe fare una singola sottoscrizione e gestire il tutto con un'unica proprietà esposta al template, con un notevole aumento del codice necessario a gestire il tutto:

import { Component, OnInit } from '@angular/core';
import { Observable, timer, Subscription } from 'rxjs';

@Component({
  selector: 'app-root',
  template: `
    <ul>
      <li>{{ time }}</li>
      <li>{{ time }}</li>
    </ul>
  `,
})
export class AppComponent implements OnInit, OnDestroy {

  public time: number;
  private timer$: Observable<number> = timer(3000, 1000);
  private subscription: Subscription;

  ngOnInit(){
    // singola sottoscrizione
    this.subscription = this.$timer.subscribe(value => this.time = value);
  }

  ngOnDestroy(){
    this.subscription.unsubscribe();
  }
}

L'idea è quella di avere una direttiva che ci dia la possibilità di dichiarare delle variabili direttamente nel codice HTML ed ottenere quindi questo risultato finale:

import { Component } from '@angular/core';
import { Observable, timer } from 'rxjs';

@Component({
  selector: 'app-root',
  template: `
    <!-- singola sottoscrizione -->
    <ng-container *ngLet="timer$ | async as time">
      <ul>
        <li>{{ time }}</li>
        <li>{{ time }}</li>
      </ul>
    </ng-container>
  `,
})
export class AppComponent {
  public timer$: Observable<number> = timer(3000, 1000);
}

Vediamo quindi come realizzarla!

Partiamo con il creare una direttiva che accetti un valore in input:

import { Directive, Input } from '@angular/core';

@Directive({
    selector: '[ngLet]'
})
export class NgLetDirective {

    @Input()
    set ngLet(value: any) {

    }
}

l'idea è che il valore passato in input sia accessibile all'interno del tag HTML sul quale la direttiva è poggiata, ad esempio:

<div *ngLet="1 + 1 as sum">
  {{ sum }}
</div>

per ottenerlo dobbiamo rendere la nostra direttiva strutturale, questo ci permetterà di associare alla struttura (il tag sul quale è poggiata) un "contesto" che potrà avere uno stato interno e quindi memorizzare un valore che sarà poi accessibile tramite un alias con as:

<div *ngLet="1 + 1 as sum">{{ sum }}</div>

o una dichiarazione implicita con let:

<div *ngLet="1 + 1; let sum">{{ sum }}</div>

Essendo la nostra direttiva "strutturale", abbiamo il compito di creare, all'interno della vista corrente, il template sul quale la direttiva è poggiata, dobbiamo quindi farci iniettare la vista corrente e la referenza al template:

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
    selector: '[ngLet]'
})
export class NgLetDirective {

    constructor(
       private viewContainer: ViewContainerRef, 
       private templateRef: TemplateRef<any>) { }

    @Input()
    set ngLet(value: any) {

    }
}

A questo punto possiamo dichiarare il nostro contesto e associarlo alla referenza del template sul quale la direttiva è poggiata e creare quindi il template all'interno della vista corrente:

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
    selector: '[ngLet]'
})
export class NgLetDirective {

    private context = { ngLet: null, $implicit: null };

    constructor(
       private viewContainer: ViewContainerRef, 
       private templateRef: TemplateRef<any>) { }

    @Input()
    set ngLet(value: any) {
        this.context.$implicit = this.context.ngLet = value;
        this.viewContainer.createEmbeddedView(this.templateRef, this.context);
    }
}

E' importante notare che il contesto, prevede due proprietà:

{ 
   ngLet: any;
   $implicit: any;
}

dove $implicit ci permette di supportare la dichiarazione implicita con let, esempio:

<div *ngLet="1 + 1; let sum">{{ sum }}</div>

mentre la proprietà ngLet ci permette di accedere al contesto tramite un alias con as, esempio:

<div *ngLet="1 + 1 as sum">{{ sum }}</div>

A questo punto dobbiamo però evitare di creare il template all'interno della vista ogni volta che il setter (set ngLet(value: any)) viene invocato, quindi aggiungiamo un flag hasViewper creare una sola volta il template:

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
    selector: '[ngLet]'
})
export class NgLetDirective {

    private context = { ngLet: null, $implicit: null };
    private hasView: boolean = false;

    constructor(
       private viewContainer: ViewContainerRef, 
       private templateRef: TemplateRef<any>) { }

    @Input()
    set ngLet(value: any) {
        this.context.$implicit = this.context.ngLet = value;
        if (!this.hasView) {
            this.viewContainer.createEmbeddedView(this.templateRef, this.context);
            this.hasView = true;
        }
    }
}

Potremmo essere soddisfatti del risultato già così, ma la nostra direttiva avrebbe una grave pecca, il valore restituito non sarebbe tipicizzato e quindi risulterebbe nel template come un any.

Passiamo quindi alla tipicizzazione della direttiva e al pieno supporto con Ivy (il rendering engine di Angular) che ci segnalerà in fase di sviluppo eventuali anomalie nell'uso improprio del tipo di dato all'interno del template.

Quando la nostra direttiva sarà creata, Angular passerà alla classe il tipo di dato utilizzato nel template come tipo generico, esempio:

<div *ngLet="1 as value">{{ value }}</div>

dato che 1 è un number il tipo passato alla classe sarà number:

new NgLetContext<number>();

quindi possiamo prevedere che la nostra classe accetti un tipo generico che chiameremo T, che a sua volta utilizzeremo per tipicizzare tutto il nostro contesto:

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

interface NgLetContext<T> {
    ngLet: T;
    $implicit: T;
}

@Directive({
    selector: '[ngLet]'
})
export class NgLetDirective<T> {

    private context: NgLetContext<T | null> = { ngLet: null, $implicit: null };
    private hasView: boolean = false;

    constructor(
       private viewContainer: ViewContainerRef, 
       private templateRef: TemplateRef<NgLetContext<T>>) { }

    @Input()
    set ngLet(value: T) {
        this.context.$implicit = this.context.ngLet = value;
        if (!this.hasView) {
            this.viewContainer.createEmbeddedView(this.templateRef, this.context);
            this.hasView = true;
        }
    }
}

Tuttavia questo non basta a fare in modo che Ivy faccia un controllo del tipo passato e quindi ottenere tutti i vantaggi di aver tipicizzato il nostro contesto. Dobbiamo segnale al compilatore che vogliamo il controllo del tipo e per farlo dobbiamo aggiungere una proprietà statica:

static ngTemplateGuard_ngLet: 'binding';

dobbiamo anche implementare un metodo che possa essere usato dal compilatore per controllare che il tipo sia valido, in questo caso il metodo tornerà sempre true perchè siamo sicuri che il contesto (ctx) sarà sempre del tipo T passato alla classe:

static ngTemplateContextGuard<T>(dir: NgLetDirective<T>, ctx: any): ctx is NgLetContext<Exclude<T, false | 0 | '' | null | undefined>> {
    return true;
}

il risultato finale è quindi questo:

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

interface NgLetContext<T> {
    ngLet: T;
    $implicit: T;
}

@Directive({
    selector: '[ngLet]'
})
export class NgLetDirective<T> {

    private context: NgLetContext<T | null> = { ngLet: null, $implicit: null };
    private hasView: boolean = false;

    constructor(
       private viewContainer: ViewContainerRef, 
       private templateRef: TemplateRef<NgLetDirective<T>>) { }

    @Input()
    set ngLet(value: T) {
        this.context.$implicit = this.context.ngLet = value;
        if (!this.hasView) {
            this.viewContainer.createEmbeddedView(this.templateRef, this.context);
            this.hasView = true;
        }
    }

    static ngTemplateGuard_ngLet: 'binding';

    static ngTemplateContextGuard<T>(dir: NgLetDirective<T>, ctx: any): ctx is NgLetContext<Exclude<T, false | 0 | '' | null | undefined>> {
        return true;
    }
}

Guarda la DEMO su stackblitz:

LINK

questa direttiva è disponibile su:

NPM https://www.npmjs.com/package/ng-let
GitHub https://github.com/nigrosimone/ng-let

Angular structural directive for sharing data as local variable into html component template

Nigro Simone — Thu, 31 Mar 2022 18:57:39 +0000

Sometime there is a need to share data into component template as local variable.

In this example timer$ is subscribed two time:

import { Component } from '@angular/core';
import { defer, Observable, timer } from 'rxjs';

@Component({
  selector: 'app-root',
  template: `
    <div>
      1: {{ timer$ | async }} <!-- first subscription -->
    </div>
    <div>
      2: {{ timer$ | async}} <!-- second subscription -->
    </div>
  `,
})
export class AppComponent {
  timer$: Observable<number> = defer(() => timer(3000, 1000));
}

The idea is create a structural directive ngLet for sharing data as local variable into html component template, eg.:

import { Component } from '@angular/core';
import { defer, Observable, timer } from 'rxjs';

@Component({
  selector: 'app-root',
  template: `
  <ng-container *ngLet="timer$ | async as time"> <!-- single subscription -->
    <div>
      1: {{ time }}
    </div>
    <div>
      2: {{ time }}
    </div>
  </ng-container>
  `,
})
export class AppComponent {
  timer$: Observable<number> = defer(() => timer(3000, 1000));
}

This structural directive create local context of variable that can be used into html template:

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

interface NgLetContext<T> {
    ngLet: T;
    $implicit: T;
}

@Directive({
    selector: '[ngLet]'
})
export class NgLetDirective<T> {

    private context: NgLetContext<T | null> = { ngLet: null, $implicit: null };
    private hasView: boolean = false;

    constructor(private viewContainer: ViewContainerRef, private templateRef: TemplateRef<NgLetContext<T>>) { }

    @Input()
    set ngLet(value: T) {
        this.context.$implicit = this.context.ngLet = value;
        if (!this.hasView) {
            this.viewContainer.createEmbeddedView(this.templateRef, this.context);
            this.hasView = true;
        }
    }

    /** @internal */
    public static ngLetUseIfTypeGuard: void;

    /**
     * Assert the correct type of the expression bound to the `NgLet` input within the template.
     *
     * The presence of this static field is a signal to the Ivy template type check compiler that
     * when the `NgLet` structural directive renders its template, the type of the expression bound
     * to `NgLet` should be narrowed in some way. For `NgLet`, the binding expression itself is used to
     * narrow its type, which allows the strictNullChecks feature of TypeScript to work with `NgLet`.
     */
    static ngTemplateGuard_ngLet: 'binding';

    /**
     * Asserts the correct type of the context for the template that `NgLet` will render.
     *
     * The presence of this method is a signal to the Ivy template type-check compiler that the
     * `NgLet` structural directive renders its template with a specific context type.
     */
    static ngTemplateContextGuard<T>(dir: NgLetDirective<T>, ctx: any): ctx is NgLetContext<Exclude<T, false | 0 | '' | null | undefined>> {
        return true;
    }
}

With ngLet you can create into html template every variable you want:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
  <ng-container *ngLet="(num1 + num2) as total"> <!-- single computation -->
    <div>
      1: {{ total }} <!-- 3 -->
    </div>
    <div>
      2: {{ total }} <!-- 3 -->
    </div>
  </ng-container> 
  `,
})
export class AppComponent {
  num1: number = 1;
  num2: number = 2;
}

This trick is also published as npm library:
https://www.npmjs.com/package/ng-let

Online demo:
https://stackblitz.com/edit/demo-ng-let

Source code:
https://github.com/nigrosimone/ng-let

Angular global ngFor track by property directive with strict type checking.

Nigro Simone — Sat, 05 Mar 2022 05:52:54 +0000

When displaying a list of data (at least somewhat large lists) you should be using Angular's trackBy feature which looks something like:

import { Component } from '@angular/core';

interface Item { 
  id: number; 
  name: string;
}

@Component({
  selector: 'app-root',
  template: `
    <ul>
      <li *ngFor="let item of list; trackBy: trackById">
        {{ item.id }} {{ item.name }}
      </li>
    </ul>
  `,
})
export class AppListComponent {
  public list: Array<Item> = [
    { id: 0, name: 'foo' },
    { id: 1, name: 'bar' },
    { id: 2, name: 'baz' },
  ];

  public trackById(index: number, item: Item) {
    return item.id;
  }
}

Unfortunately, Angular forces us to write a tracking function in each component in which we want to make use of trackBy. With ng-for-track-by-property you could just handle this entirely in the template by passing a property like this:

import { Component } from '@angular/core';

interface Item { 
  id: number; 
  name: string;
}

@Component({
  selector: 'app-root',
  template: `
    <ul>
      <li *ngFor="let item of list; trackByProperty: 'id'">
        {{ item.id }} {{ item.name }}
      </li>
    </ul>
  `,
})
export class AppListComponent {
  public list: Array<Item> = [
    { id: 0, name: 'foo' },
    { id: 1, name: 'bar' },
    { id: 2, name: 'baz' },
  ];
}

ng-for-track-by-property has strict type checking and only available property are allowed

Get Started

Step 1: install ng-for-track-by-property

npm i ng-for-track-by-property

Step 2: Import NgForTrackByPropertyModule into your app module, eg.:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { CommonModule } from '@angular/common';
import { NgForTrackByPropertyModule } from 'ng-for-track-by-property';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    CommonModule,
    NgForTrackByPropertyModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
  ],
})
export class AppModule { }

Step 3: add trackByProperty to your ngFor, eg.:

import { Component } from '@angular/core';

interface Item { 
  id: number; 
  name: string;
}

@Component({
  selector: 'app-root',
  template: `
    <ul>
      <li *ngFor="let item of list; trackByProperty: 'id'">
        {{ item.id }} {{ item.name }}
      </li>
    </ul>
  `,
})
export class AppComponent {
  public list: Array<Item> = [
    { id: 0, name: 'foo' },
    { id: 1, name: 'bar' },
    { id: 2, name: 'baz' },
  ];
}

you can also track by index with trackByIndex, eg.:

import { Component } from '@angular/core';

interface Item { 
  id: number; 
  name: string;
}

@Component({
  selector: 'app-root',
  template: `
    <ul>
      <li *ngFor="let item of list; trackByIndex">
        {{ item.id }} {{ item.name }}
      </li>
    </ul>
  `,
})
export class AppComponent {
  public list: Array<Item> = [
    { id: 0, name: 'foo' },
    { id: 1, name: 'bar' },
    { id: 2, name: 'baz' },
  ];
}

since track by property id is a very common case, there is also trackById:

import { Component } from '@angular/core';

interface Item { 
  id: number; 
  name: string;
}

@Component({
  selector: 'app-root',
  template: `
    <ul>
      <li *ngFor="let item of list; trackById">
        {{ item.id }} {{ item.name }}
      </li>
    </ul>
  `,
})
export class AppComponent {
  public list: Array<Item> = [
    { id: 0, name: 'foo' },
    { id: 1, name: 'bar' },
    { id: 2, name: 'baz' },
  ];
}

See:

NgSimpleState. Simple state management in Angular with only Services and RxJS or Signal.

Nigro Simone — Wed, 02 Jun 2021 05:45:28 +0000

One of the most challenging things in software development is state management. Currently there are several state management libraries for Angular apps: NGRX, NGXS, Akita...

But what if you don't want to learn, setup, and deal with all the boilerplate for a simple project, what if you want to manage state by only using tools you already know well as an Angular developer.

In this write up, I'll show you a simple way of managing state by only using RxJS and Dependency Injection with NgSimpleState.

Step 1: install `ng-simple-state`

npm i ng-simple-state

Step 2: Import provideNgSimpleState into your providers

import { isDevMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { provideNgSimpleState } from 'ng-simple-state';

bootstrapApplication(AppComponent, {
  providers: [
    provideNgSimpleState({
      enableDevTool: isDevMode(),
      persistentStorage: 'local'
    })
  ]
});

Step 3: Create your store

This is an example for a counter store in a src/app/counter-store.ts file.
Obviously, you can create every store you want with every complexity you need.

1) Define yuor state interface, eg.:

export interface CounterState {
    count: number;
}

2) Define your store service by extending NgSimpleStateBaseRxjsStore or NgSimpleStateBaseSignalStore, eg.:

import { Injectable } from '@angular/core';
import { NgSimpleStateBaseRxjsStore } from 'ng-simple-state';

export interface CounterState {
    count: number;
}

@Injectable()
export class CounterStore extends NgSimpleStateBaseRxjsStore<CounterState> {

}

3) Implement initialState() method and provide the initial state of the store, eg.:

import { Injectable } from '@angular/core';
import { NgSimpleStateBaseRxjsStore } from 'ng-simple-state';

export interface CounterState {
    count: number;
}

@Injectable()
export class CounterStore extends NgSimpleStateBaseRxjsStore<CounterState> {

  initialState(): CounterState {
    return {
      count: 0
    };
  }

}

4) Implement one or more selectors of the partial state you want, in this example selectCount() eg.:

import { Injectable } from '@angular/core';
import { NgSimpleStateBaseRxjsStore } from 'ng-simple-state';
import { Observable } from 'rxjs';

export interface CounterState {
    count: number;
}

@Injectable()
export class CounterStore extends NgSimpleStateBaseRxjsStore<CounterState> {

  initialState(): CounterState {
    return {
      count: 0
    };
  }

  selectCount(): Observable<number> {
    return this.selectState(state => state.count);
  }
}

5) Implement one or more actions for change the store state, in this example increment() and decrement() eg.:

import { Injectable } from '@angular/core';
import { NgSimpleStateBaseRxjsStore } from 'ng-simple-state';
import { Observable } from 'rxjs';

export interface CounterState {
  count: number;
}

@Injectable()
export class CounterStore extends NgSimpleStateBaseRxjsStore<CounterState> {

  initialState(): CounterState {
    return {
      count: 0
    };
  }

  selectCount(): Observable<number> {
    return this.selectState(state => state.count);
  }

  increment(increment: number = 1): void {
    this.setState(state => ({ count: state.count + increment }));
  }

  decrement(decrement: number = 1): void {
    this.setState(state => ({ count: state.count - decrement }));
  }
}

Step 3: Use your store into the components, eg.:

import { Component, inject } from '@angular/core';
import { Observable } from 'rxjs';
import { CounterStore } from './counter-store';

@Component({
  selector: 'app-root',
  imports: [CounterStore],
  template: `
  <h1>Counter: {{ counter$ | async }}</h1>
  <button (click)="counterStore.decrement()">Decrement</button>
  <button (click)="counterStore.increment()">Increment</button>
  `,
})
export class AppComponent {
  public counterStore = inject(CounterStore);
  public counter$: Observable<number>;
}

That's all!

see the live demo.

DEV Community: Nigro Simone

Smart HTTP Caching in Angular with NgHttpCaching

🚀 How It Works

✨ Key Features

⚡ Installation

🔧 Configuration

🧠 Smart Cache Invalidation on Mutations

💾 Persistent Storage

LocalStorage

SessionStorage

Custom Store

🏷 Tag-Based Cache Management

🎯 Per-Request Overrides

🛠 Advanced Example: Safe POST Caching

🧹 Manual Cache Control

📦 Live Demo

Benchmarking PostgreSQL Drivers in Node.js: node-postgres vs postgres.js, who is the faster?

pg-native wins

pg is close behind

Conclusion

Turbo Array: Supercharge Your JavaScript Array Operations 🚀

🔥 The Problem: Chained Array Methods Are Slow

🚀 Meet Turbo Array

⚡ Performance Boost: How Fast Is It?

📦 Install and Try It Out

Introducing Ultimate Express: The 5x Fastest Drop-In Replacement for Express.js

Seamless Integration

Performance Comparison

Key Features

Differences from Express.js

Getting Started

Enhancing JSON Serialization Performance in Express.js with express-fast-json-stringify

What is fast-json-stringify?

Introducing express-fast-json-stringify

Installation

Creating a JSON Schema

Applying the Middleware

Sending JSON Responses

Performance Benefits

Conclusion

Enable / Disable Your Angular UI During Long Tasks with ng-lock

Introduction

Why Use ng-lock?

Installation

Customizing ng-lock

Advanced Usage

Additional Utility Functions

Examples

Conclusion

Caricare componenti Angular in maniera lazy senza il routing direttamente dall'HTML

Come creare in Angular una direttiva per dichiarare variabili nei template HTML dei componenti

Angular structural directive for sharing data as local variable into html component template

Angular global ngFor track by property directive with strict type checking.

Get Started

NgSimpleState. Simple state management in Angular with only Services and RxJS or Signal.

Step 1: install ng-simple-state

Step 2: Import provideNgSimpleState into your providers

Step 3: Create your store

Step 3: Use your store into the components, eg.:

That's all!

Step 1: install `ng-simple-state`