Pipes: când și cum

<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 custom -->
<p>{{ post().publishedAt | timeAgo }}</p>

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

<!-- async: se abonează și se dezabonează singur (util când încă ai Observable-uri) -->
@let user = user$ | async;

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

@Pipe({ name: 'timeAgo' }) // standalone implicit, pur implicit
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 'chiar acum';
    const minutes = Math.round(seconds / 60);
    if (minutes < 60) return `acum ${minutes} min`;
    const hours = Math.round(minutes / 60);
    if (hours < 24) return `acum ${hours} h`;
    const days = Math.round(hours / 24);
    return days === 1 ? 'ieri' : `acum ${days} zile`;
  }
}

// Formatare în română pentru 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' },
  ],
};

// Cum alegi:
//
//  Transformare de AFIȘARE, refolosită în multe componente   → pipe  (date, monede, inițiale, timeAgo)
//  Calcul specific unei componente, pe semnalele ei           → computed()
//  Logică de business / derivare de stare                     → computed() / store
//  Metodă apelată din template                                → doar pentru lucruri triviale
//
// De ce nu metodă? Se apelează la fiecare change detection a componentei.
// Pipe-ul pur și computed()-ul se recalculează doar când li se schimbă intrările.

// Pipe impur: rulează la FIECARE change detection, indiferent de input
@Pipe({ name: 'filterBy', pure: false })
export class FilterByPipe implements PipeTransform {
  transform<T>(items: T[], predicate: (item: T) => boolean): T[] {
    return items.filter(predicate); // rulează des → evită pe liste mari
  }
}
// Aproape mereu, varianta corectă e un computed() în componentă:
readonly activeUsers = computed(() => this.users().filter((u) => u.active));