Pipes: when and how

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

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

<!-- async: subscribes and unsubscribes by itself (useful while you still have Observables) -->
@let user = user$ | async;

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

@Pipe({ name: 'timeAgo' }) // standalone by default, pure by default
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 'just now';
    const minutes = Math.round(seconds / 60);
    if (minutes < 60) return `${minutes} min ago`;
    const hours = Math.round(minutes / 60);
    if (hours < 24) return `${hours} h ago`;
    const days = Math.round(hours / 24);
    return days === 1 ? 'yesterday' : `${days} days ago`;
  }
}

// Formatting in Romanian for 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' },
  ],
};

// How to choose:
//
//  DISPLAY transformation, reused in many components   → pipe  (date, currency, initials, timeAgo)
//  Calculation specific to one component, on its signals → computed()
//  Business logic / state derivation                    → computed() / store
//  Method called from the template                      → only for trivial things
//
// Why not a method? It is called on every change detection of the component.
// The pure pipe and the computed() are recalculated only when their inputs change.

// Impure pipe: runs on EVERY change detection, whatever the input
@Pipe({ name: 'filterBy', pure: false })
export class FilterByPipe implements PipeTransform {
  transform<T>(items: T[], predicate: (item: T) => boolean): T[] {
    return items.filter(predicate); // runs often → avoid it on large lists
  }
}
// Almost always the right choice is a computed() in the component:
readonly activeUsers = computed(() => this.users().filter((u) => u.active));