Les nouveautés d'Angular 19.2 (27 février 2025)

Angular 19.2 apporte son lot de nouvelles fonctionnalités passionnantes qui vont améliorer significativement l'expérience des développeurs. Dans cet article, nous allons explorer les principales nouveautés de cette version.

Le streaming des ressources : une révolution pour la gestion des données

Imaginez que vous développez une application de chat en temps réel. Jusqu'à présent, la gestion des messages entrants nécessitait une configuration complexe avec des Observables. Avec la nouvelle version d'Angular 19.2, cette gestion devient beaucoup plus simple grâce au streaming des ressources.

NOUVEAU

La fonction resource va recevoir une option de streaming qui permet à une Promise d'émettre plusieurs valeurs au lieu d'une seule !

Comment ça fonctionne ?

Voici un article tout neuf sur le sujet : Streaming Resources dans Angular

Dans cet exemple, nous utilisons le streaming des ressources pour gérer les messages d'un chat en temps réel. Le signal peut être mis à jour plusieurs fois, permettant une mise à jour fluide de l'interface utilisateur à chaque nouveau message.

httpResource : Une nouvelle approche pour les appels HTTP

Angular 19.2 introduit httpResource, une nouvelle API expérimentale qui permet de créer des requêtes HTTP réactives en exposant l'état de la requête et la valeur de la réponse sous forme de WritableResource.

NOUVEAU

Par défaut, httpResource suppose que le backend renvoie des données JSON. Pour les autres types de données, des sous-constructeurs spécifiques sont disponibles comme httpResource.text !

Voici un exemple d'utilisation simple :

user.service.ts

import { httpResource } from '@angular/common/http';
import { User } from './user.model';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  // URL statique
  users = httpResource<User[]>('/api/users');

  // URL dynamique avec signal
  selectedUser = signal<number>(1);
  userDetails = httpResource<User>(() => `/api/users/${this.selectedUser()}`);

  // Configuration avancée
  searchUsers = httpResource<User[]>({
    method: 'GET',
    url: '/api/users/search',
    params: () => ({
      query: this.searchQuery(),
      page: this.currentPage()
    }),
    headers: {
      'Accept': 'application/json'
    }
  });
}

text-example.ts

// Exemple avec réponse texte
const textContent = httpResource.text('/api/content');

// Exemple avec réponse blob
const imageContent = httpResource.blob('/api/image');

// Exemple avec réponse ArrayBuffer
const binaryContent = httpResource.arrayBuffer('/api/binary');

Utilisation dans un composant

user.component.ts

@Component({
  selector: 'app-users',
  template: `
    <input (input)="updateSearch($event)">

    @if (users.loading()) {
      <div>Chargement...</div>
    }

    @if (users.error(); as error) {
      <div class="error">{{ error.message }}</div>
    }

    @if (users.value(); as userList) {
      @for (user of userList; track user.id) {
        <div class="user-card">
          <h3>{{ user.name }}</h3>
        </div>
      }
    }
  `
})
export class UserComponent {
  private userService = inject(UserService);
  users = this.userService.users;
}

Caractéristiques principales

FONCTIONNALITÉS

• Utilise HttpClient en interne et supporte donc les intercepteurs
• Compatible avec les tests via HttpTestingController
• Mise à jour automatique lors des changements de signaux
• Gestion intégrée des états de chargement et des erreurs

EXPÉRIMENTAL

httpResource est une fonctionnalité expérimentale dans Angular 19.2. Son API pourrait évoluer dans les versions futures.

Autres améliorations

Support des template literals

Angular 19.2 introduit le support des template literals (littéraux de gabarit) dans les templates, offrant plus de flexibilité dans la manipulation des chaînes de caractères. Cette nouveauté permet d'écrire du code plus expressif et plus lisible.

ASTUCE

Les template literals vous permettent d'intégrer directement des expressions JavaScript dans vos chaînes de caractères, rendant votre code plus intuitif et plus maintenable.

Voici plusieurs cas d'utilisation pratiques :

1. Contenu dynamique

message.component.html

<p>Message: {{ `Bonjour ${utilisateur.nom} - Statut: ${utilisateur.statut}` }}</p>

2. Classes dynamiques

user-card.component.html

<!-- Avec interpolation -->
<div class="{{ `card-${utilisateur.type}` }}">
  {{ utilisateur.nom }}
</div>

<!-- Avec property binding -->
<div [class]="`card-${utilisateur.type}`">
  {{ utilisateur.nom }}
</div>

3. URLs dynamiques

image.component.html

<img [src]="`${baseUrl}/images/${utilisateur.id}-${taille}`" alt="Photo de profil"/>

4. Utilisation avec les pipes

greeting.component.html

<p>{{ `bienvenue ${utilisateur.nom}` | uppercase }}</p>

5. Dans les boucles

list.component.html

@for(item of items; track item.id) {
  <button [attr.data-id]="`btn-${item.id}`">
    {{ `Action ${item.nom}` }}
  </button>
}

ATTENTION

Assurez-vous que les expressions utilisées dans vos template literals retournent bien des valeurs définies pour éviter les erreurs d'exécution.