Pipes

Работа с pipes

Pipes представляют специальные инструменты, которые позволяют форматировать отображаемые значения. Например, нам надо вывести определенную дату:

import { Component} from "@angular/core";
import { DatePipe } from "@angular/common";

@Component({
    selector: "my-app",
    standalone: true,
    imports: [DatePipe],    // импортируем DatePipe
    template: `<div>Без форматирования: {{myDate}}</div>
			   <div>С форматированием: {{myDate | date}}</div>`
})
export class AppComponent { 

	myDate = new Date(1961, 3, 12);
}

Здесь создается дата, которая дважды выводится в шаблоне. Во втором случае к дате применяется форматирование с помощью класса DatePipe. Но чтобы применить DatePipe, его надо импортировать из пакета "angular/common"

Встроенные pipes

В Angular есть ряд встроенных pipes. Основные из них:

• CurrencyPipe: форматирует валюту

• PercentPipe: форматирует проценты

• UpperCasePipe: переводит строку в верхний регистр

• LowerCasePipe: переводит строку в нижний регистр

• DatePipe: форматирует дату

• DecimalPipe: задает формат числа

• SlicePipe: обрезает строку

При применении классов суффикс Pipe отбрасывается (за исключением DecimalPipe - для его применения используется название "number"):

import { Component} from "@angular/core";
import {UpperCasePipe, LowerCasePipe, PercentPipe, CurrencyPipe } from "@angular/common";

@Component({
    selector: "my-app",
    standalone: true,
    imports: [UpperCasePipe, LowerCasePipe, PercentPipe, CurrencyPipe],
    template: `<div>{{welcome | uppercase}}</div>
			   <div>{{welcome | lowercase}}</div>
			   <div>{{persentage | percent}}</div>
			   <div>{{persentage | currency}}</div>`
})
export class AppComponent { 

	welcome: string = "Hello World!";
	persentage: number = 0.14; 
}

Параметры в pipes

Pipes могут получать параметры. Например, пайп SlicePipe, который обрезает строку, может получать в качестве параметра, начальный и конечный индексы подстроки, которую надо вырезать:

import { Component} from "@angular/core";
import {SlicePipe } from "@angular/common";

@Component({
    selector: "my-app",
    standalone: true,
    imports: [SlicePipe],
    template: `<div>{{welcome | slice:3}}</div>
			   <div>{{welcome | slice:6:11}}</div>`
})
export class AppComponent { 

	welcome: string = "Hello World!";
}

Все параметры в пайп передаются через двоеточие. В данном случае slice:6:11 вырезает подстроку, начиная с 6 до 11 индекса. При этом, если начала выреза строки обязательно передавать, то конечный индекс необязателен. В этом случае в качестве конечного индекса выступает конец строки.

Форматирование дат

DatePipe в качестве параметра может принимать шаблон даты:

import { Component} from "@angular/core";
import {DatePipe } from "@angular/common";

@Component({
    selector: "my-app",
    standalone: true,
    imports: [DatePipe],
    template: `<div>{{myDate | date:"dd/MM/yyyy"}}</div>`
})
export class AppComponent { 
	myDate = Date.now();
}

Форматирование чисел

DecimalPipe в качестве параметра принимает формат числа в виде шаблона:

{{ value | number [ : digitsInfo [ : locale ] ] }}

• value: само выводимое значение

• digitsInfo: строка в формате "minIntegerDigits.minFractionDigits-maxFractionDigits", где

• minIntegerDigits - минимальное количество цифр в целой части

• minFractionDigits - минимальное количество цифр в дробной части

• maxFractionDigits - максимальное количество цифр в дробной части

• locale: код применяемой культуры

import { Component} from "@angular/core";
import { DecimalPipe } from "@angular/common";

@Component({
    selector: "my-app",
    standalone: true,
    imports: [DecimalPipe],
    template: `<div>{{pi | number:"2.1-2"}}</div>
	<div>{{pi | number:"3.5-5"}}</div>`
})
export class AppComponent { 

	pi: number = 3.1415;
}

Форматирование валюты

CurrencyPipe может принимать ряд параметров:

{{ value | currency [ : currencyCode [ : display [ : digitsInfo [ : locale ] ] ] ] }}

• value: выводимая сумма

• currencyCode: код валюты согласно спецификации ISO 4217. Если не указан, то по умолчанию применяется USD

• display: указывает, как отображать символ валюты. Может принимать следующие значения:

  • code: отображает код валюты (например, USD)

  • symbol (значение по умолчанию): отображает символ валюты (например, $)

  • symbol-narrow: некоторые страны используют в качестве символа валюты несколько символов, например, канадский доллар - CA$, данный параметр позволяет получить собственно символ валюты - $

  • string: отображает произвольную строку

• digitsInfo: формат числа, который применяется в DecimalPipe

• locale: код используемой локали

import { Component} from "@angular/core";
import { CurrencyPipe } from "@angular/common";

@Component({
    selector: "my-app",
    standalone: true,
    imports: [CurrencyPipe],
    template: `
    <div>{{money | currency:"RUB":"code"}}</div>
    <div>{{money | currency:"RUB":"symbol-narrow"}}</div>
    <div>{{money | currency:"RUB":"symbol":"1.1-1"}}</div>
    <div>{{money | currency:"RUB":"symbol-narrow":"1.1-1"}}</div>
    <div>{{money | currency:"RUB":"тока седня по цене "}}</div>`
})
export class AppComponent { 
    money: number = 23.45;
}

Цепочки pipes

Вполне возможно, что мы захотим применить сразу несколько pipes к одному значению, тогда мы можем составлять цепочки выражений, разделенные вертикальной чертой:

import { Component} from "@angular/core";
import { SlicePipe, UpperCasePipe } from "@angular/common";

@Component({
    selector: "my-app",
    standalone: true,
    imports: [SlicePipe, UpperCasePipe],
    template: `<div>{{message | slice:6:11 | uppercase}}</div>`
})
export class AppComponent { 
	message = "Hello World!";
}