Pipes: wann und wie

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

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

<!-- async: abonniert und kündigt selbst (nützlich, solange du noch Observables hast) -->
@let user = user$ | async;

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

@Pipe({ name: 'timeAgo' }) // standardmäßig standalone, standardmäßig pure
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 'gerade eben';
    const minutes = Math.round(seconds / 60);
    if (minutes < 60) return `vor ${minutes} Min.`;
    const hours = Math.round(minutes / 60);
    if (hours < 24) return `vor ${hours} Std.`;
    const days = Math.round(hours / 24);
    return days === 1 ? 'gestern' : `vor ${days} Tagen`;
  }
}

// Formatierung auf Rumänisch für 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' },
  ],
};

// So entscheidest du:
//
//  ANZEIGE-Transformation, in vielen Komponenten genutzt → Pipe  (date, currency, initials, timeAgo)
//  Berechnung nur für eine Komponente, auf ihren Signals → computed()
//  Fachlogik / Ableitung von Zustand                     → computed() / Store
//  Methode, die aus dem Template aufgerufen wird         → nur für Triviales
//
// Warum keine Methode? Sie wird bei jeder Change Detection der Komponente aufgerufen.
// Die pure Pipe und das computed() werden nur neu berechnet, wenn sich ihre Eingaben ändern.

// Impure Pipe: läuft bei JEDER Change Detection, egal welche Eingabe
@Pipe({ name: 'filterBy', pure: false })
export class FilterByPipe implements PipeTransform {
  transform<T>(items: T[], predicate: (item: T) => boolean): T[] {
    return items.filter(predicate); // läuft oft → bei großen Listen vermeiden
  }
}
// Fast immer ist ein computed() in der Komponente die richtige Wahl:
readonly activeUsers = computed(() => this.users().filter((u) => u.active));