Angular. Пайпы

Главная » Видеоуроки » JavaScript » Angular. Пайпы

Angular пайпы — это аналоги AngularJS фильтров. Они выполняют трансформацию даных перед выводом в шаблоне компонента.

В Angular есть стандартные пайпы (date, uppercase, lowercase, currency, decimal, percent). Также разработчик может создавать свои пайпы.  Пайп — это класс, реализующий метод transform интерфейса PipeTransform. 

Код урока (пайп)

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


Код урока (вызов стандартных и пользовательских пайпов)

<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