Pipes are used to transform/format data inside a template. Angular ships with a bunch of built-in pipes.
typescript
<!-- String pipes -->
<p>{{ 'hello world' | uppercase }}</p> <!-- HELLO WORLD -->
<p>{{ 'HELLO WORLD' | lowercase }}</p> <!-- hello world -->
<p>{{ 'hello world' | titlecase }}</p> <!-- Hello World -->
<!-- Number pipes -->
<p>{{ 1234.5678 | number:'1.2-2' }}</p> <!-- 1,234.57 -->
<p>{{ 0.25 | percent }}</p> <!-- 25% -->
<p>{{ 99.99 | currency:'USD' }}</p> <!-- $99.99 -->
<!-- Date pipe -->
<p>{{ today | date:'short' }}</p> <!-- 10/16/25, 3:45 PM -->
<p>{{ today | date:'fullDate' }}</p> <!-- Thursday, October 16, 2025 -->
<p>{{ today | date:'dd/MM/yyyy' }}</p> <!-- 16/10/2025 -->
<!-- JSON pipe (for debugging) -->
<pre>{{ user | json }}</pre>
// component.ts
export class MyComponent {
today = new Date();
user = { name: 'John', age: 25 };
}You should see
(The data gets transformed into the specified formats and displayed)