Directives and Pipes in Angular/

...

/

Solution: Custom Pipes

Solution: Custom Pipes

Here’s the solution to the custom pipe task along with the expected result and explanation.

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 name ...