Angular. Pipes

Home » Tutorials » JavaScript » Angular. Pipes

Angular pipes are analogues of AngularJS filters. They transform data before output it in component template.

Angular has several built-in pipes (date, uppercase, lowercase, currency, decimal, percent). Also developer can create his own pipes. Pipe is a class, realize transform method of PipeTransform interface.

Code lesson (pipe)

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

  name: 'rolesCount'
export class RolesCountPipe implements PipeTransform {

  transform(value: string[], ...args: unknown[]): string {
    if (args[0] === 'rus') {
      return `${value.length} ролей пользователя`;
    return `${value.length} user roles`;


Code lesson (call built-in and custom pipes)

<button (click)="getUser()">{{title}}</button>   



<p>{{user?.login | uppercase}}</p>

<p>{{user?.roles | rolesCount : 'rus' : 'RUS'}}</p>

<p>{{today | date}}</p>


Submit a Comment

Your email address will not be published. Required fields are marked *

The reCAPTCHA verification period has expired. Please reload the page.

Pin It on Pinterest

Share This