Course Content

Introduction to Angular

1. Angular Fundamentals

What is Angular?The Evolution and Stability of Angular Key Principles of the Framework Setting Up the Environment Getting Started with Angular CLI Angular Project Structure

2. Components and Templates

What Is a Component?The Main Component in Angular Creating a Component Types of Data Binding in Angular Component and Template Interaction in Angular Communication Between Components in Angular

3. Mastering Angular Directives and Pipes

Introduction to Directives in Angular Structural Directives in Angular Attribute Directives in Angular Creating Custom Directives in Angular Introduction to Pipes Creating a Custom Pipe in Angular

4. Services and Dependency Injection in Angular

Introduction to Angular Services Creating a Custom Service in Angular Service Injection into a Component Adding Functionality to Our Application Saving Data to Local Storage in Angular

5. Standalone Components & Modules

Introduction to Modules in Angular Modular Architecture in Angular Transition to Standalone Components How Standalone Components Work in Angular

6. Routing and Navigation in Angular

Routing Basics in Angular Implementing the TaskDetailsComponent Setting Up Routing in Angular Component Communication and Navigation Handling Non-Existent Routes in Angular

Creating a Custom Pipe in Angular

Sometimes, the built-in pipes in Angular just aren't enough. You might need a unique transformation that's specific to your app. In that case, you can create your own custom pipe.

Let's say you have a list of tasks, and each task can be either completed or not. To make completed tasks visually stand out, you want to automatically add a ✅ emoji to their titles. Instead of hardcoding this logic into every template, you can build a dedicated pipe for it.

How to Create a Custom Pipe

To generate a custom pipe in Angular, use the following CLI command. We'll call it formatTitle, since its job is to format the task title based on its completion status:

This will create two files:

format-title.pipe.ts — the pipe logic;
format-title.pipe.spec.ts — a unit test file (you can delete it if you don't need testing right now).

When Angular generates the pipe, it looks something like this:

pipe


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

@Pipe({
  name: 'formatTitle',
  standalone: true
})
export class FormatTitlePipe implements PipeTransform {
  transform(value: unknown, ...args: unknown[]): unknown {
    return value;
  }
}

Here's what this code does:

The FormatTitlePipe class implements PipeTransform, which ensures the pipe has a transform method;
The transform method receives a value (the input) and optional arguments and returns a transformed result. At this point, it just returns the input as-is;
The pipe's name (formatTitle) is defined in the @Pipe decorator — that's the name you'll use in the template.

Right now, the pipe exists but doesn't actually do anything. Let's add the actual logic next.

Custom Pipe Implementation

We need to add an ✅ emoji to the title based on the task's completion status (task.completed). Update the pipe to apply our custom formatting logic:

pipe


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

@Pipe({
  name: 'formatTitle',
  standalone: true
})
export class FormatTitlePipe implements PipeTransform {
  transform(value: string, completed: boolean): string {
    return completed ? value + " ✅" : value;
  }
}

The transform method takes two arguments:

value — the task title;
completed — a boolean indicating whether the task is done.

If the task is complete (true), it adds a ✅ emoji at the end of the title. Otherwise, it just returns the title unchanged.

Using the Pipe in a Template

To use the pipe in your Angular template, apply it with the pipe symbol |:

template


              1
            
<div class="task-title">{{ task.title | formatTitle:task.completed }}</div>

What's happening here:

task.title is the value passed to the pipe;
formatTitle:task.completed applies the pipe and sends in the completed flag;
The title will either include the ✅ emoji or not, depending on the task's status.

Using pipes like this helps keep your templates clean and readable, and pushes the formatting logic into reusable, testable code.

Everything was clear?

Thanks for your feedback!

Section 3. Chapter 6

Ask AI

Ask anything or try one of the suggested questions to begin our chat

Course Content

Introduction to Angular

1. Angular Fundamentals

What is Angular?The Evolution and Stability of Angular Key Principles of the Framework Setting Up the Environment Getting Started with Angular CLI Angular Project Structure

2. Components and Templates

What Is a Component?The Main Component in Angular Creating a Component Types of Data Binding in Angular Component and Template Interaction in Angular Communication Between Components in Angular

3. Mastering Angular Directives and Pipes

Introduction to Directives in Angular Structural Directives in Angular Attribute Directives in Angular Creating Custom Directives in Angular Introduction to Pipes Creating a Custom Pipe in Angular

4. Services and Dependency Injection in Angular

Introduction to Angular Services Creating a Custom Service in Angular Service Injection into a Component Adding Functionality to Our Application Saving Data to Local Storage in Angular

5. Standalone Components & Modules

Introduction to Modules in Angular Modular Architecture in Angular Transition to Standalone Components How Standalone Components Work in Angular

6. Routing and Navigation in Angular

Routing Basics in Angular Implementing the TaskDetailsComponent Setting Up Routing in Angular Component Communication and Navigation Handling Non-Existent Routes in Angular

Creating a Custom Pipe in Angular

Sometimes, the built-in pipes in Angular just aren't enough. You might need a unique transformation that's specific to your app. In that case, you can create your own custom pipe.

How to Create a Custom Pipe

To generate a custom pipe in Angular, use the following CLI command. We'll call it formatTitle, since its job is to format the task title based on its completion status:

This will create two files:

format-title.pipe.ts — the pipe logic;
format-title.pipe.spec.ts — a unit test file (you can delete it if you don't need testing right now).

When Angular generates the pipe, it looks something like this:

pipe


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

@Pipe({
  name: 'formatTitle',
  standalone: true
})
export class FormatTitlePipe implements PipeTransform {
  transform(value: unknown, ...args: unknown[]): unknown {
    return value;
  }
}

Here's what this code does:

The FormatTitlePipe class implements PipeTransform, which ensures the pipe has a transform method;
The transform method receives a value (the input) and optional arguments and returns a transformed result. At this point, it just returns the input as-is;
The pipe's name (formatTitle) is defined in the @Pipe decorator — that's the name you'll use in the template.

Right now, the pipe exists but doesn't actually do anything. Let's add the actual logic next.

Custom Pipe Implementation

We need to add an ✅ emoji to the title based on the task's completion status (task.completed). Update the pipe to apply our custom formatting logic:

pipe


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

@Pipe({
  name: 'formatTitle',
  standalone: true
})
export class FormatTitlePipe implements PipeTransform {
  transform(value: string, completed: boolean): string {
    return completed ? value + " ✅" : value;
  }
}

The transform method takes two arguments:

value — the task title;
completed — a boolean indicating whether the task is done.

If the task is complete (true), it adds a ✅ emoji at the end of the title. Otherwise, it just returns the title unchanged.

Using the Pipe in a Template

To use the pipe in your Angular template, apply it with the pipe symbol |:

template


              1
            
<div class="task-title">{{ task.title | formatTitle:task.completed }}</div>

What's happening here:

task.title is the value passed to the pipe;
formatTitle:task.completed applies the pipe and sends in the completed flag;
The title will either include the ✅ emoji or not, depending on the task's status.

Using pipes like this helps keep your templates clean and readable, and pushes the formatting logic into reusable, testable code.

Everything was clear?

Thanks for your feedback!

Section 3. Chapter 6