Pipes. Пользовательские директивы

Август 21, 2022

Главная
Информатика
Pipes. Пользовательские директивы

Содержание

2. Pipes - это инструменты, позволяющие переформатировать вывод данных в определённый вид. Например, если у нас есть
3. Можно указывать параметры Pipe. Например: {{ outDate | date:”dd.MM.yyyy” }} Дата примет вид 05.10.2019
4. Выводит дату в заданном формате. Запись: {{date : ‘формат даты’ : ‘Часовой пояс’ : ‘locale’}} {{
5. В файле app.module.ts import { registerLocaleData} from '@angular/common'; import localeRu from '@angular/common/locales/ru'; registerLocaleData(localeRu, 'ru');
6. Вывод десятичных чисел в виде форматированной строки {{ variable | number : ‘минимальное количество целых. Минимальное
7. Формат валюты {{ num | currency: ‘код валюты’}} Дополнительные параметры здесь: https://angular.io/api/common/CurrencyPipe
8. UpperCasePipe {{str | uppercase}} LowerCasePipe {{str | lowercase}} TitleCasePipe {{str | titlecase}} //Делает первую букву заглавной
9. Переводит любое значение в формат json {{ date | json}}
10. Переводит значение в процентное соотношение {{ 0.14 | percent }} Выведет 14% Можно отформатировать как и
11. Pipes можно выстраивать в цепочки, продолжая ставить вертикальную черту.
12. ng generate pipe binary Функция transform преобразует данные из одного вида в другой.
13. export class BinaryPipe implements PipeTransform { transform(value: number, ...args: any[]): any { return value.toString(2); } }
14. Список пользователей. Отображается список пользователей. При выборе пользователя отображается информация, с возможностью удалить или отредактировать данные.
16. Скачать презентацию

Слайд 2

Pipes - это инструменты, позволяющие переформатировать вывод данных в определённый вид.
Например,

если у нас есть дата в формате JS, можно её вывести следующим образом:
{{ outDate | date }}
Тогда дата примет вид Oct 5, 2019

Слайд 3

Можно указывать параметры Pipe. Например:
{{ outDate | date:”dd.MM.yyyy” }}
Дата примет вид

05.10.2019

Слайд 4

Выводит дату в заданном формате. Запись:
{{date : ‘формат даты’ : ‘Часовой

пояс’ : ‘locale’}}
{{ date | date:"HH:mm:ss dd.MM.yyyy":"+0600":"ru"}}
Полный список форматов
https://angular.io/api/common/DatePipe
По умолчанию доступна только локально.

Слайд 5

В файле app.module.ts
import { registerLocaleData} from '@angular/common';
import localeRu from '@angular/common/locales/ru';
registerLocaleData(localeRu, 'ru');

Слайд 6

Вывод десятичных чисел в виде форматированной строки
{{ variable | number :

‘минимальное количество целых.
Минимальное количество дробных-максимальное количество дробных’ : ‘locale’}}

Слайд 7

Формат валюты
{{ num | currency: ‘код валюты’}}
Дополнительные параметры здесь:
https://angular.io/api/common/CurrencyPipe

Слайд 8

UpperCasePipe {{str | uppercase}}
LowerCasePipe {{str | lowercase}}
TitleCasePipe {{str | titlecase}} //Делает

первую букву заглавной
SlicePipe {{str: slice: начало : конец}} //Обрезает строку

Слайд 9

Переводит любое значение в формат json
{{ date | json}}

Слайд 10

Переводит значение в процентное соотношение
{{ 0.14 | percent }}
Выведет 14%
Можно

отформатировать как и число.

Слайд 11

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

Слайд 12

ng generate pipe binary
Функция transform преобразует данные из одного вида в

другой.

Слайд 13

export class BinaryPipe implements PipeTransform {
transform(value: number, ...args: any[]): any

{
return value.toString(2);
}
}
{{15 | binary}}

Слайд 14

Список пользователей.
Отображается список пользователей. При выборе пользователя отображается информация, с возможностью

удалить или отредактировать данные.
Отдельный компонент должен производить добавление пользователя.