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

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

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

@Pipe({
  name: 'factorial',
})
export class FactorialPipe implements PipeTransform {
  transform(value: number, args?: any): number {
    if (value <= 0) return 0

    let result = 1
    for (let i = 1; i <= value; i++) {
      result = result * i
    }
    return result
  }
}

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

@Pipe({
    name: 'factorial'
})

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

Применим FactorialPipe в коде компонента:

import { Component } from '@angular/core'

@Component({
  selector: 'my-app',
  template: `
    <div>
      Факториал числа {{ x }} равен {{ x | factorial }}
    </div>
  `,
})
export class AppComponent {
  x: number = 5
}

Но чтобы задействовать FactorialPipe, его надо добавить в главном модуле приложения AppModule:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { AppComponent } from './app.component'
import { FactorialPipe } from './factorial.pipe'

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent, FactorialPipe],
  bootstrap: [AppComponent],
})
export class AppModule {}

Передача параметров

Добавим еще один pipe, который будет принимать параметры. Пусть это будет класс, который из массива строк будет создавать строку, принимая начальный и конечный индексы для выборки данных из массива. Для этого добавим в проект новый файл join.pipe.ts, в котором определим следующее содержимое:

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

@Pipe({
  name: 'join',
})
export class JoinPipe implements PipeTransform {
  transform(array: any, start?: any, end?: any): any {
    let result = array
    if (start !== undefined) {
      if (end !== undefined) {
        result = array.slice(start, end)
      } else {
        result = array.slice(start, result.length)
      }
    }
    return result.join(', ')
  }
}

В метод transform класса JoinPipe первым параметром передается массив, второй необязательный параметр start представляет начальный индекс, с которого производится выборка, а третий параметр end — конечный индекс.

С помощью метода slice() получаем нужную часть массива, а с помощью метода join() соединяем массив в строку.

Применим JoinPipe:

import { Component } from '@angular/core'

@Component({
  selector: 'my-app',
  template: `
    <div>{{ phones | join }}</div>
    <div>{{ phones | join: 1 }}</div>
    <div>{{ phones | join: 1:3 }}</div>
  `,
})
export class AppComponent {
  phones = [
    'iPhone 7',
    'LG G 5',
    'Honor 9',
    'Idol S4',
    'Nexus 6P',
  ]
}

Опять же подключим JoinPipe в модуле приложения:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { AppComponent } from './app.component'
import { FactorialPipe } from './factorial.pipe'
import { JoinPipe } from './join.pipe'
@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent, FactorialPipe, JoinPipe],
  bootstrap: [AppComponent],
})
export class AppModule {}

Результат работы:

Комментарии