Thuta Learning
IntermediateWeb Developmentintermediate

Built-in Pipes

Relax. We'll talk through this in plain words — no textbook voice.

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)
Built-in Pipes | Thuta Learning