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';

@Pipe({
  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>{{1+1}}</p>

<p>{{getString()}}</p>

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

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

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

0 Comments

Submit a Comment

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

Подписаться на рассылку

Будьте в курсе - получайте последние статьи на свой email

Ваша подписка успешно оформлена

Pin It on Pinterest

Share This