Pipes Angular — Angular

Pipes mentransformasi data di template tanpa mengubah data asli. Built-in Pipes {{ nama | uppercase }} {{ nama | lowercase }} {{ tanggal | date:"dd/MM/yyyy"…

Pipes mentransformasi data di template tanpa mengubah data asli.

Built-in Pipes

<p>{{ nama | uppercase }}</p>
<p>{{ nama | lowercase }}</p>
<p>{{ tanggal | date:"dd/MM/yyyy" }}</p>
<p>{{ harga | currency:"IDR" }}</p>
<p>{{ data | json }}</p>

Chaining Pipes

<p>{{ nama | uppercase | slice:0:5 }}</p>

Custom Pipe

@Pipe({ name: "exclaim", standalone: true })
export class ExclaimPipe implements PipeTransform {
  transform(value: string): string {
    return value + "!"
  }
}

// Penggunaan: {{ "halo" | exclaim }} → "halo!"

Yang akan kamu pelajari