Pipes — formatowanie w szablonie

import { Component, signal } from '@angular/core';
import { LowerCasePipe, SlicePipe, TitleCasePipe, UpperCasePipe } from '@angular/common';

@Component({
    selector: 'app-demo',
    imports: [UpperCasePipe, LowerCasePipe, TitleCasePipe, SlicePipe],
    templateUrl: './demo.html'
})
export class Demo {
    readonly tytul = signal('wielki turniej gier retro w sali dwunastej');
    readonly sala = signal('SALA INFORMATYCZNA');
    readonly gracze = signal(['Pixel', 'Bajt', 'Kursor', 'Ping', 'Router']);
}

<div class="p-3">
  <ul class="list-group" style="width: 32rem">
    <li class="list-group-item">uppercase: {{ tytul() | uppercase }}</li>
    <li class="list-group-item">titlecase: {{ tytul() | titlecase }}</li>
    <li class="list-group-item">lowercase: {{ sala() | lowercase }}</li>
    <li class="list-group-item">slice:0:15 — {{ tytul() | slice:0:15 }}…</li>
    <li class="list-group-item">podium: {{ (gracze() | slice:0:3).join(', ') }}</li>
  </ul>
</div>

import { ApplicationConfig, LOCALE_ID, provideBrowserGlobalErrorListeners } from '@angular/core';
import { provideRouter } from '@angular/router';
import { registerLocaleData } from '@angular/common';
import localePl from '@angular/common/locales/pl';

import { routes } from './app.routes';

registerLocaleData(localePl);

export const appConfig: ApplicationConfig = {
  providers: [
    provideBrowserGlobalErrorListeners(),
    provideRouter(routes),
    { provide: LOCALE_ID, useValue: 'pl' }
  ]
};
@END
@@CODE nowa-16-2/demo.ts
@@CODE nowa-16-2/demo.html
@@OUT wynik w przeglądarce
bez parametru: 16 paź 2026
dd.MM.yyyy: 16.10.2026
HH:mm: 16:30
EEEE: piątek
d MMMM y: 16 października 2026
fullDate: piątek, 16 października 2026

import { Component, computed, signal } from '@angular/core';
import { CurrencyPipe, DecimalPipe, PercentPipe } from '@angular/common';

@Component({
    selector: 'app-demo',
    imports: [DecimalPipe, CurrencyPipe, PercentPipe],
    templateUrl: './demo.html'
})
export class Demo {
    readonly cena = signal(12.5);
    readonly sztuk = signal(3);
    readonly rabat = signal(0.15);
    readonly masa = signal(1234.5678);

    readonly razem = computed(() => this.cena() * this.sztuk() * (1 - this.rabat()));
}

<div class="p-3">
  <ul class="list-group" style="width: 30rem">
    <li class="list-group-item">masa | number: {{ masa() | number }}</li>
    <li class="list-group-item">masa | number:'1.0-0': {{ masa() | number:'1.0-0' }}</li>
    <li class="list-group-item">masa | number:'1.2-2': {{ masa() | number:'1.2-2' }}</li>
    <li class="list-group-item">cena | currency:'PLN': {{ cena() | currency:'PLN' }}</li>
    <li class="list-group-item">rabat | percent: {{ rabat() | percent }}</li>
    <li class="list-group-item fw-bold">do zapłaty: {{ razem() | currency:'PLN' }}</li>
  </ul>
</div>

import { Component, signal } from '@angular/core';
import { CurrencyPipe, DatePipe, JsonPipe, SlicePipe, UpperCasePipe } from '@angular/common';

@Component({
    selector: 'app-demo',
    imports: [DatePipe, CurrencyPipe, SlicePipe, UpperCasePipe, JsonPipe],
    templateUrl: './demo.html'
})
export class Demo {
    readonly wydarzenia = signal([
        { id: 1, tytul: 'Turniej gier retro', data: new Date(2026, 9, 16), cena: 5 },
        { id: 2, tytul: 'Noc robotów i automatyki', data: new Date(2026, 10, 6), cena: 0 },
        { id: 3, tytul: 'Warsztat druku 3D dla początkujących', data: new Date(2026, 11, 4), cena: 12.5 },
    ]);
}

<div class="p-3">
  <table class="table" style="width: 36rem">
    <thead><tr><th>Wydarzenie</th><th>Kiedy</th><th>Wstęp</th></tr></thead>
    <tbody>
      @for (w of wydarzenia(); track w.id) {
        <tr>
          <td>{{ w.tytul | slice:0:16 | uppercase }}</td>
          <td>{{ w.data | date:'EEE, d MMM' }}</td>
          <td>
            @if (w.cena === 0) { bezpłatny } @else { {{ w.cena | currency:'PLN' }} }
          </td>
        </tr>
      }
    </tbody>
  </table>

  <pre class="bg-light p-2 small" style="width: 36rem">{{ wydarzenia()[0] | json }}</pre>
</div>