Search⌘ K
AI Features
Home
Courses
Directives and Pipes in Angular

Solution: Custom Pipes

Explore how to implement custom Angular pipes that transform complex data objects into readable formats. Learn to build pipes for full names and account types, enhancing your Angular app's data presentation and maintainability.

We'll cover the following...

Solution

Here’s one possible implementation of what the solution for this task may look like:

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

@Pipe({
  name: 'accountType'
})
export class AccountTypePipe implements PipeTransform {

  transform(account: Account): string {
    if (account === Account.Premium) return "Premium account";
    if (account === Account.Standard) return "Standard account";
    if (account === Account.Trial) return "Account on Trial";

    return '';
  }

}
The task's solution

Explanation

There are two pipes we need to master:

  • Full name
  • Account type

Let’s focus on full ...