Создание своих pipes

Если нам потребуется некоторая предобработка при выводе данных, мы можем для этой цели написать свои собственные pipes. К примеру, нам надо выводить число в определенной степени. Для этого добавим в проект новый файл pow.pipe.ts:

import { Pipe, PipeTransform } from '@angular/core';
/*
 * Raise the value exponentially
 * Takes an exponent argument that defaults to 1.
 * Usage:
 *   value | pow:exponent
 * Example:
 *   {{ 2 |  pow:10}}
 *   formats to: 1024
*/
@Pipe({
  name: 'pow'
})
export class PowPipe implements PipeTransform {
  transform(value: number, exponent: string): number {
    let exp = parseFloat(exponent);
    return Math.pow(value, isNaN(exp) ? 1 : exp);
  }
}

К кастомному pipe должен применяться декоратор @Pipe. Этот декоратор определяет метаданные, в частности, название pipe, по которому он будет использоваться:

@Pipe({
  name: 'pow'
})

Также класс реализует метод transform()интерфейса PipeTransform. Этот метод в качестве параметра принимает значение, к которому применяется pipe, а также опциональный набор параметров. А на выходе возвращается отформатированное значение.

Но чтобы задействовать PowPipe, его надо добавить в главном модуле приложения AppModule в секцию declarations.