Pipes : quand et comment

<p>{{ order().createdAt | date: 'dd MMM yyyy, HH:mm' }}</p>
<p>{{ order().total | currency: 'RON' : 'symbol' : '1.2-2' }}</p>
<p>{{ ratio() | percent: '1.0-1' }}</p>
<p>{{ user().name | initials }}</p>          <!-- pipe personnalisée -->
<p>{{ post().publishedAt | timeAgo }}</p>

@for (entry of config() | keyvalue; track entry.key) {
  <dt>{{ entry.key }}</dt><dd>{{ entry.value }}</dd>
}

<!-- async : s’abonne et se désabonne tout seul (utile tant que vous avez encore des Observables) -->
@let user = user$ | async;

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'timeAgo' }) // standalone par défaut, pure par défaut
export class TimeAgoPipe implements PipeTransform {
  transform(value: Date | string | number, now: number = Date.now()): string {
    const seconds = Math.round((now - new Date(value).getTime()) / 1000);
    if (seconds < 45) return 'à l’instant';
    const minutes = Math.round(seconds / 60);
    if (minutes < 60) return `il y a ${minutes} min`;
    const hours = Math.round(minutes / 60);
    if (hours < 24) return `il y a ${hours} h`;
    const days = Math.round(hours / 24);
    return days === 1 ? 'hier' : `il y a ${days} jours`;
  }
}

// Formatage en roumain pour date, currency, number
import { registerLocaleData } from '@angular/common';
import localeRo from '@angular/common/locales/ro';
import { LOCALE_ID } from '@angular/core';

registerLocaleData(localeRo);

export const appConfig: ApplicationConfig = {
  providers: [
    { provide: LOCALE_ID, useValue: 'ro' },
    { provide: DEFAULT_CURRENCY_CODE, useValue: 'RON' },
  ],
};

// Comment choisir :
//
//  Transformation d’AFFICHAGE, réutilisée dans plusieurs composants → pipe  (date, currency, initials, timeAgo)
//  Calcul propre à un composant, sur ses Signals        → computed()
//  Logique métier / dérivation d’état                   → computed() / Store
//  Méthode appelée depuis le template                   → seulement pour du trivial
//
// Pourquoi pas une méthode ? Elle est appelée à chaque Change Detection du composant.
// La pipe pure et le computed() ne sont recalculés que lorsque leurs entrées changent.

// Pipe impure : s’exécute à CHAQUE Change Detection, quelle que soit l’entrée
@Pipe({ name: 'filterBy', pure: false })
export class FilterByPipe implements PipeTransform {
  transform<T>(items: T[], predicate: (item: T) => boolean): T[] {
    return items.filter(predicate); // s’exécute souvent → à éviter sur de grandes listes
  }
}
// Presque toujours, le bon choix est un computed() dans le composant :
readonly activeUsers = computed(() => this.users().filter((u) => u.active));