Custom Angular Pipes mit Moment.js: Relative Zeitangaben leicht gemacht

Custom Pipes sind in Angular ein mächtiges Werkzeug zur Datenformatierung im Template. Besonders nützlich: Eine Pipe, die Zeitangaben wie „vor 3 Stunden“ oder „vor 2 Tagen“ ausgibt. In diesem Beitrag zeigen wir dir, wie du mithilfe von Moment.js eine solche Pipe baust.

Warum Moment.js?

Obwohl Moment.js mittlerweile als „legacy“ gilt, ist es weit verbreitet und sehr einfach zu verwenden. Für einfache Projekte und bestehende Codebasen ist es nach wie vor eine praktische Lösung.

Vorteile:

• Einfache Syntax
• Unterstützung für relative Zeitangaben
• Viele Sprachen & Formate

Wenn du ein neues Projekt startest, dann lohnt sich eventuell ein Blick in die empfohlenen alternativen Bibliotheken.

Beispiel: RelativeDatePipe mit Moment.js

Installiere zuerst Moment.js (und die Typdefinitionen):

npm install moment

Dann implementiere die Pipe:

import { Pipe, PipeTransform } from '@angular/core';
import * as moment from 'moment';
import 'moment/locale/de'; // Deutsch laden

@Pipe({
  name: 'relativeDate'
})
export class RelativeDatePipe implements PipeTransform {
  constructor() {
    moment.locale('de');
  }

  transform(value: string | Date): string {
    return moment(value).fromNow();
  }
}

Verwendung im Template

<span>{ nachricht.zeitstempel | relativeDate }</span>

Wenn zeitstempel z. B. 2025-07-07T09:00:00Z ist, wird das angezeigt als:

vor 2 Stunden

Fazit

Mit wenigen Zeilen Code kannst du eine elegante Pipe erstellen, die deine Datumsangaben viel benutzerfreundlicher darstellt. Moment.js macht das Handling von Zeit und Datum besonders einfach – perfekt für Admin-Panels, Chat-Apps oder jedes Projekt mit Zeitstempeln.