What are Pipes - Uppercase, Date, Currency, JSON Pipe

Pipes are an important feature in Angular.

They are used to change how data is shown on the UI.

They do not change the original data, only the display.

Pipes save time because Angular already provides many built-in pipes.

You just need to use the pipe symbol | and the pipe name.


What Pipes Do

Pipes transform data before displaying it on the screen.

They can change text case, format dates, format currency, and show JSON data properly.

Pipes can be used with normal properties and with signals.


Using Pipes with Text

The uppercase pipe converts all letters to capital letters.


<h1>{{ title() | uppercase }}</h1>

The titlecase pipe capitalizes the first letter of each word.


<h1>{{ title() | titlecase }}</h1>

This is useful when data comes from user input or an API and is not properly formatted.


Pipes with User Input

User input is stored in a signal.

The entered value is displayed using titlecase.

<h1>{{ name() | titlecase }}</h1>
<input type="text" (input)="name.set($event.target.value)">

No matter how the user types, the first letter of each word is shown as capital.


Currency Pipe

The currency pipe formats numbers as money.

<h1>{{ amount | currency:'USD' }}</h1>

The value is displayed with a currency symbol based on the parameter.


Date Pipe

The date pipe formats date values.

<h1>{{ today | date }}</h1>

Different formats can be applied using parameters.

<h1>{{ today | date:'mm' }}</h1>
<h1>{{ today | date:'dd' }}</h1>
<h1>{{ today | date:'yy' }}</h1>
<h1>{{ today | date:'short' }}</h1>
<h1>{{ today | date:'full' }}</h1>

This helps show dates in a clean and readable format.


JSON Pipe

When an object is displayed directly, it shows [object Object].

The JSON pipe converts the object into readable JSON format.

<h2>{{ user() | json }}</h2>

This is useful for debugging and viewing object data on the UI.