Angular – Step 13: Pipes


Pipes are a feature of Angular that allow you to transform data in your templates. They are a simple way to format, filter, and manipulate data before it is displayed to the user. In Angular, there are two types of pipes: built-in pipes and custom pipes.

Tabular Comparison

Here’s a comparison table that shows the differences between built-in pipes and custom pipes in Angular:

Built-in PipesCustom Pipes
DefinitionPredefined by AngularCreated by the developer
UsageUsed directly in templatesUsed directly in templates
Example`{{ valueuppercase }}`

As you can see from the table, built-in pipes are predefined by Angular and used directly in templates, while custom pipes are created by the developer and also used directly in templates.

Text Diagram

Here’s a text diagram that shows how a pipe can be used in Angular:

+------------+   +---------------+
| Input Data |   | Pipe          |
+------------+   +---------------+
      |                  |
      |                  |
+------------+           |
| HTML       |           |
+------------+           |
      |                  |
      |                  |
+------------+   +---------------+
| Output Data|   | TypeScript    |
+------------+   +---------------+

In this diagram, we have some input data that needs to be transformed using a pipe. The pipe takes in the input data and performs some transformation on it. The HTML template then uses the transformed output data to render the view. The TypeScript code defines the behavior of the pipe.

Complete Code Program

Here’s a complete code program that shows how a pipe can be used in Angular:

import { Pipe, PipeTransform } from '@angular/core';

  name: 'myCustomPipe'
export class MyCustomPipe implements PipeTransform {
  transform(value: string): string {
    return value.toUpperCase();

In this code program, we define a custom pipe called MyCustomPipe that takes in a string and returns the string in uppercase. We use the @Pipe decorator to define the name of the pipe, and we implement the PipeTransform interface to define the transform method that performs the transformation.

To use the custom pipe in the HTML template, we simply add it to the binding expression like this:

cssCopy code<p>{{ myValue | myCustomPipe }}</p>

This will transform the value of myValue using the MyCustomPipe pipe and display it in uppercase.


In conclusion, pipes are a powerful feature of Angular that allow you to transform data in your templates. With built-in pipes, you can quickly and easily format, filter, and manipulate data without having to write any custom code. With custom pipes, you can create your own transformations to suit your specific needs. By using pipes effectively, you can create dynamic and interactive web applications that provide a seamless and intuitive user experience.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.