> ## Content Index
> Fetch the complete content index at: https://www.sfeir.dev/llms.txt
> Use this file to discover other available public pages before exploring further.

# Angular 19.2
- URL: https://www.sfeir.dev/front/angular-19-2/
- Published: 2025-05-28T07:49:53.000Z
- Updated: 2025-05-28T07:49:53.000Z
- Description: 🚀 Angular 19.2 introduit des fonctionnalités innovantes comme l'API httpResource(), des améliorations sur les API expérimentales, et des outils pour simplifier la gestion des données et optimiser les performances. Plongez dans les détails de cette mise à jour pour les développeurs Angular.
- Author: Maxime Dewez
- Tags: Front, Angular

### Introduction

La version 19.2 d'Angular apporte un vent de fraîcheur avec des nouveautés et des améliorations significatives. Parmi les points forts de cette mise à jour, on retrouve l'introduction de l'API expérimentale `httpResource()`, des évolutions des API `rxResource` et `resource`, ainsi que des fonctionnalités qui simplifient la gestion des données et l'écriture des templates. Angular continue de s'affirmer comme un framework incontournable pour le développement d'applications web modernes.

### Nouvelle API `httpResource` ! 

Elle est enfin là ! La nouvelle API expérimentale pour créer des ressources qui utilisent des requêtes HTTP : `httpResource()`. Pour l'utiliser, il est nécessaire d'injecter `HttpClient` au démarrage de l'application. L'utilisation la plus simple est d'appeler cette fonction en lui passant une fonction qui renvoie l'URL de récupération des données :

```ts
readonly beersResource = httpResource<Array<Beer>>(() => 'https://random-data-api.com/api/v2/beers');

```

Elle va nous renvoyer les mêmes propriétés que `resource` mais également quelques propriétés supplémentaires spécifiques aux ressources HTTP :

- `statusCode` : un signal qui contient le code d'état de la réponse
- `headers` : un signal qui contient les en-têtes de la réponse sous forme de `HttpHeaders`
- `progress` : un signal qui contient la progression du téléchargement de la réponse sous forme de `HttpProgressEvent`

Il est possible de définir une ressource réactive en utilisant un signal dans la fonction qui définit l'URL. La ressource sera automatiquement rechargée lorsque le signal changera :

```ts
size = signal(10);

readonly beersResource = httpResource<Array<Beer>>(
  () => `https://random-data-api.com/api/v2/beers?size=${this.size()}`
);

```

Pour un contrôle plus fin sur la requête, vous pouvez également passer un objet HttpResourceRequest à la fonction httpResource(). Cet objet doit avoir une propriété `url` et peut avoir d'autres options comme la `method` (GET par défaut), `params`, `reportProgress`,`headers`, etc. Et pour encore plus de réactivité, vous pouvez utiliser des signaux dans les propriétés `url`, qu'on a vu précédemment, ainsi que `params` et `headers`.

```ts
readonly moreBeersResource = httpResource<Array<Beer>>(() => ({
  url: `https://random-data-api.com/api/v2/beers?size=${this.size()}`,
  method: 'POST',
  params: { malts: 'PALE' },
  headers: new HttpHeaders({}),
  body: JSON.stringify({}),
  reportProgress: false
}));

```

Par défaut, le format des données récupérées est du JSON. Cependant, vous pouvez demander d'autres formats grâce aux fonctions `httpResource.text()`, `httpResource.arrayBuffer()` ou encore `httpResource.blob()`.

### API `rxResource` et `resource`

Les API expérimentales `rxResource` et `resource`, introduites dans la [version 19 d'Angular](https://www.sfeir.dev/front/angular-19-tout-ce-quil-faut-savoir-sur-les-innovations-majeures-du-framework/), ont été améliorées. Il est maintenant possible de définir une valeur par défaut qui sera utilisée comme valeur initiale de la ressource ou lorsque la ressource est dans un état `idle`, `loading` ou en `erreur`. Au lieu de la valeur `undefined` par défaut.

```ts
todos = resource<Todo[], { todoQuery: string }>({
    defaultValue: [{ id: 0, userId: 0, title: 'MA TODO PAR DÉFAUT', completed: true}],
    request: () => ({ todoQuery: this.todoQuery() }),
    loader: async ({ request, abortSignal }) => {
      const todos = await fetch(`${TODO_API_URL}?title_like=^${request.todoQuery}`, {
        signal: abortSignal
      });
      if (!todos.ok) {
        throw new Error(`Could not fetch : ${todos.url}`);
      }
      return await todos.json();
    }
  });
```

La fonction `stream` fait son apparition dans `resource`. Cette dernière va vous permettre de disposer des données de la `resource` en continu, par exemple via une connexion WebSocket. La `resource` est définie avec une option `stream,` au lieu d'une option `loader`, et va nous renvoyer une promesse de signal. 

```ts
streamResource = resource<string | number, { startValue: number }>({
   request: this.request,
   stream: async ({ request, abortSignal }) => {

     const resultSignal = signal<StreamItem<number | string>>({
       value: 0
     });

     // Logique à implémenter, WebSocket connexion pour collecter et gérer les messages d’une conversation par exemple

     abortSignal.addEventListener('abort', () => {
       console.log('Abort');
     });

     return resultSignal;
  }
});
```

La valeur du signal doit TOUJOURS être renvoyée avec une valeur ou une propriété d'erreur :

```js
export type StreamItem<T> = { value: T } | { error: unknown };
```

Lorsque la promesse est résolue, le chargeur peut continuer à mettre à jour ce signal au fil du temps, et la ressource mettra à jour sa valeur et son erreur chaque fois que l'élément du signal `request` changera. Et pour terminer `abortSignal`, il va gérer le nettoyage des ressources dans les Streaming Resources, comme les connexions WebSocket ou les EventSource. Celui-ci peut être déclenché dans trois cas :

- Destruction d'un composant
- Lors que la `resource` est arrêté manuellement
- Lorsque le signal `request` renvoie une nouvelle valeur

### Template literals

Le compilateur Angular prend désormais en charge les templates de strings dans les templates. Cela permet d'utiliser des chaînes dynamiques directement dans les templates Angular :

```ts
<h1 [class]="`title-${color()}`">
  {{ `Hello ${world() | titlecase}!` }}
</h1>
```

Cette fonctionnalité améliore la lisibilité et la flexibilité des templates, tout en permettant l'utilisation de pipes dans les parties dynamiques.

### Validateurs de formulaire

Les validateurs `minLength`, `maxLength` et `required` fonctionnent désormais avec des Set. Voici quelques exemples :

```ts
console.log(Validators.minLength(2)(new FormControl("S")));
// Affiche { minlength: { actualLength: 1, requiredLength: 2 } }

console.log(Validators.minLength(2)(new FormControl(["f"])));
// Affiche { minlength: { actualLength: 1, requiredLength: 2 } }

// En v19.2 👇
console.log(Validators.minLength(4)(new FormControl(new Set(["e", "i", "r"]))));
// Affiche { minlength: { actualLength: 3, requiredLength: 4 } }
```

Cette mise à jour élargit les possibilités de validation des formulaires, notamment pour les collections de données.

### Migration vers des balises auto-fermantes

Il est désormais possible de convertir les éléments void automatiquement en balises auto-fermantes à l'aide de la commande suivante :

```bash
ng generate @angular/core:self-closing-tag
```

##### Avant migration :

```html
<app-http-resource></app-http-resource>
```

##### Après migration :

```html
<app-http-resource/>
```

### Compatible Typescript 5.8

Angular 19.2 est désormais compatible avec TypeScript 5.8, offrant ainsi les dernières améliorations et fonctionnalités du langage. Pour en savoir plus, consultez les [notes de version TypeScript 5.8](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-5-8.html?ref=sfeir.dev).