// display.component.ts
import { Component } from '@angular/core';
import { UpperCasePipe, CurrencyPipe, DatePipe } from '@angular/common';

@Component({
  selector: 'app-display',
  standalone: true,
  imports: [UpperCasePipe, CurrencyPipe, DatePipe],
  template: `
    <p>{{ name | uppercase }}</p>
    <p>{{ price | currency:'EUR' }}</p>
    <p>{{ today | date:'fullDate' }}</p>
  `,
})
export class DisplayComponent {
  name = 'philip';
  price = 19.99;
  today = new Date();
}

/*
  Notes:
  - Each pipe must be imported individually (or via CommonModule) into
    the component's imports array — without it, Angular reports an
    "unknown pipe" error on the template.
  - The underlying name/price/today properties are never modified by
    the pipes; only the displayed output is transformed.
*/