Angular Academy · Lesson

Using Built-in Pipes

Format dates, numbers, and text with pipes.

Lesson 1 of 413 steps

Using Built-in Pipes is a free Angular Academy lesson on CoddyKit. This is lesson 1 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, and your progress syncs across the web and the CoddyKit app. The Angular Academy course includes 4 lessons in total.

What Is a Pipe?

A pipe transforms data directly in your template for display. You write a value, the pipe character |, then the pipe name.

Pipes are great for formatting dates, numbers, currency, and text without writing extra component logic.

The Pipe Syntax

The basic form is {{ value | pipeName }}. Angular passes the value into the pipe and renders the transformed result.

<!-- template -->
<p>{{ "hello" | uppercase }}</p>
<!-- renders: HELLO -->

The uppercase and lowercase Pipes

uppercase and lowercase change the case of a string. They are simple and commonly used for labels and headings.

@Component({
  selector: "app-demo",
  template: "<p>{{ name | uppercase }}</p>"
})
export class DemoComponent {
  name = "angular";
}
// renders: ANGULAR

The date Pipe

The date pipe formats a Date object or timestamp into a readable string. By default it uses a medium date format.

<p>{{ today | date }}</p>
<!-- e.g. May 30, 2026 -->

// component
today = new Date();

Formatting Dates

You can pass a format string to the date pipe, like "shortDate", "fullDate", or a custom pattern such as "yyyy-MM-dd".

<p>{{ today | date:"yyyy-MM-dd" }}</p>
<!-- e.g. 2026-05-30 -->

<p>{{ today | date:"shortTime" }}</p>
<!-- e.g. 2:30 PM -->

The currency Pipe

The currency pipe formats a number as money. By default it uses USD, but you can pass a currency code.

<p>{{ price | currency }}</p>
<!-- $42.50 -->

<p>{{ price | currency:"EUR" }}</p>
<!-- €42.50 -->

// component
price = 42.5;

The number and percent Pipes

The number pipe formats numbers with digit options, and percent renders a value as a percentage.

<p>{{ 3.14159 | number:"1.0-2" }}</p>
<!-- 3.14 -->

<p>{{ 0.25 | percent }}</p>
<!-- 25% -->

Understanding digitsInfo

The number pipe accepts a digitsInfo string: minIntegerDigits.minFractionDigits-maxFractionDigits. For example "1.2-2" always shows exactly two decimals.

<p>{{ 7 | number:"1.2-2" }}</p>
<!-- 7.00 -->

<p>{{ 1234.5 | number:"1.0-0" }}</p>
<!-- 1,235 -->

The json Pipe

The json pipe serializes any object to a JSON string. It is mainly used for debugging templates so you can see the shape of your data.

<pre>{{ user | json }}</pre>
<!-- { "id": 1, "name": "Ada" } -->

// component
user = { id: 1, name: "Ada" };

The slice Pipe

The slice pipe returns a subset of an array or string, similar to JavaScript slice. It is useful for truncating lists.

<p>{{ "Angular" | slice:0:4 }}</p>
<!-- Angu -->

<li *ngFor="let item of items | slice:0:3">{{ item }}</li>

Importing Pipes in Standalone Components

In standalone components you must import the pipes you use, for example DatePipe or CurrencyPipe, from @angular/common.

import { DatePipe, CurrencyPipe } from "@angular/common";

@Component({
  selector: "app-demo",
  standalone: true,
  imports: [DatePipe, CurrencyPipe],
  template: "<p>{{ today | date }}</p>"
})
export class DemoComponent {
  today = new Date();
}

Quick Check

Test your understanding of built-in pipes.

Answer it in the interactive lesson

Recap

You learned the core built-in pipes: uppercase, lowercase, date, currency, number, percent, json, and slice.

Pipes keep formatting in the template, clean and declarative. Next you will chain pipes and pass them arguments.

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 38
Lessons: 144

Start learning free View the full course

Frequently Asked Questions

Is the “Using Built-in Pipes” lesson free?

Yes — any 3 lessons of the Angular Academy learning path, including “Using Built-in Pipes”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Angular Academy course includes 4 lessons in total.

What will I learn in “Using Built-in Pipes”?

Format dates, numbers, and text with pipes. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Angular Academy?

No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 1 of 4.

How long does the “Using Built-in Pipes” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Angular Academy lesson?

Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Angular Academy