Impure<\/strong>: Angular executes an impure pipe during every component change detection cycle. An impure pipe is called often, as often as every keystroke or mouse-move.<\/p>\n JsonPipe API<\/a><\/p>\n Example usage:<\/p>\n Inject in a Component:<\/p>\n UpperCasePipe<\/a> , LowerCasePipe<\/a> and TitleCasePipe<\/a>.<\/p>\n Used by DatePipe<\/strong>, CurrencyPipe<\/strong>, DecimalPipe<\/strong> and PercentPipe<\/strong>.<\/p>\n Official i18n docs<\/a><\/p>\n By default, Angular comes with the Or without module:<\/p>\n CurrencyPipe API<\/a><\/p>\n Outside html templates, use Parameters:<\/p>\n Parameters DecimalPipe API<\/a><\/p>\n Outside html templates, use PercentPipe API<\/a><\/p>\n Use DatePipe API<\/a><\/p>\n Works on a All functions like More options for the format:<\/p>\n SlicePipe API<\/a><\/p>\n KeyValuePipe API<\/a><\/p>\n Works on Objects and Maps.<\/p>\n The optional The output would be:<\/p>\n AsyncPipe API<\/a><\/p>\n Returns the last emitted value. Unsubscribes automatically in I typically always<\/strong> use the Where I18nPluralPipe API<\/a><\/p>\n Display \u201c1 item\u201d but \u201c2 items\u201d, check the structure here<\/a>.<\/p>\n I18nSelectPipe API<\/a><\/p>\n Create your own pipes for displaying values relevant in your application domain.<\/p>\n Use Options:<\/p>\n If you didn\u2019t use Run tests with Some custom examples to get in the right mind what Pipes could be useful for.<\/p>\n Convert newlines in string resources to While Fancy display of filesizes etc.<\/p>\n Pretty much any generic pipe you can think of already exists. This is one project with such collection.<\/p>\n String:<\/strong>shorten<\/a> , slugify<\/a> , lpad<\/a> , camelize<\/a><\/p>\n Array:<\/strong>unique<\/a> , tail<\/a> , flatten<\/a> , every<\/a> , \u2026<\/p>\n Other:<\/strong>isGreaterThan<\/a> , \u2026<\/p>\n Pretty much the same collection of pipes in this project.<\/p>\n String:<\/strong>decodeURI<\/a> , latinize<\/a> , repeat<\/a> , replace<\/a> , reverseStr<\/a> , truncate<\/a> , wrap<\/a> , stripTags<\/a> , \u2026<\/p>\n Array:<\/strong>max<\/a> , min<\/a> , sum<\/a> , count<\/a> , head<\/a> , \u2026<\/p>\n Number \/ Math:<\/strong>bytes<\/a> , degrees<\/a> , ceil<\/a> , round<\/a> , sqrt<\/a> , \u2026<\/p>\n Other:<\/strong>defaults<\/a> , \u2026<\/p>\n Stuff that came into being during the making of this post<\/b><\/p>\n Other interesting reads<\/b><\/p>\n Pipes<\/strong>: Chainable, declarative display-value transformations to use in your Html.<\/p>\n This post covers:<\/p>\n An example:<\/p>\n<pre>{{ {number: 7} | json }}<\/pre>\n\n<!-- Combine with the AsyncPipe to dump Observables -->\n<code>{{ observable$ | async | json }}<\/code>\n<\/code><\/pre>\nimport { CurrencyPipe, formatCurrency } from '@angular\/common';\n\n@Component({\n providers: [CurrencyPipe]\n})\nexport class AppComponent {\n constructor(private cp: CurrencyPipe) {\n this.cp.transform(450.657, 'EUR', 'symbol', '0.2-2', 'fr'); \/\/ 450,66\u00a0\u20ac\n\n \/\/ Use the formatCurrency instead! (formatDate, formatNumber, ...)\n formatCurrency(450.657, 'fr', 'EUR', 'symbol', '0.2-2');\n }\n}\n<\/code><\/pre>\nString Casing Pipes<\/h2>\n
lowercase => {{ 'LOWERCASE' | lowercase }}\n\nUPPERCASE => {{ 'uppercase' | uppercase }}\n\nThis Is Title Case => {{ 'tHIs is tiTLE CaSe' | titlecase }}\n<\/code><\/pre>\nLocale Sensitive Pipes<\/h2>\n
Setup<\/h3>\n
en-US<\/code> locale only. Import a different locale in your app.module.ts<\/code>:<\/p>\nimport { registerLocaleData } from '@angular\/common';\nimport { LOCALE_ID, NgModule } from '@angular\/core';\nimport localeFr from '@angular\/common\/locales\/fr';\n\nregisterLocaleData(localeFr, 'fr');\n\n@NgModule({\n providers: [\n {provide: DEFAULT_CURRENCY_CODE, useValue: 'EUR'}, \/\/ default: USD\n {provide: LOCALE_ID, useValue: 'fr'}, \/\/ default: en-US\n \/\/ default dateFormat: mediumDate\n \/\/ default timezone: user local system timezone\n {provide: DATE_PIPE_DEFAULT_OPTIONS, useValue: {dateFormat: 'MM\/dd\/yy', timezone: '-1200'}},\n ],\n})\nexport class AppModule { }\n<\/code><\/pre>\nimport { ApplicationConfig } from '@angular\/core';\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n {provide: LOCALE_ID, useValue: 'fr'},\n {provide: DEFAULT_CURRENCY_CODE, useValue: 'EUR'},\n {provide: DATE_PIPE_DEFAULT_OPTIONS, useValue: {dateFormat: 'MM\/dd\/yy', timezone: '-1200'}},\n ]\n};\n\nbootstrapApplication(AppComponent, appConfig);\n<\/code><\/pre>\nCurrencyPipe<\/h3>\n
formatCurrency()<\/code><\/a> instead!<\/p>\n<!-- Signature -->\n{{ value_expression | currency [ : currencyCode [ : display [ : digitsInfo [ : locale ] ] ] ] }}\n\n<!-- Examples -->\n\u20ac1,500.95 => {{ 1500.953 | currency:'EUR':'symbol' }}\n\n003,96 EUR => {{ 3.955 | currency:'EUR':'code':'3.2-2':'fr' }}\n<\/code><\/pre>\n\n
digitsInfo<\/code> and locale<\/code> work exactly the same for DecimalPipe and PercentPipe.<\/p>\nDecimalPipe<\/h3>\n
formatNumber()<\/code><\/a> instead!<\/p>\n<!-- Signature -->\n{{ value_expression | number [ : digitsInfo [ : locale ] ] }}\n\n<!-- Example -->\n025.1230 => {{ 25.123 | number:'3.4-4'}}\n<\/code><\/pre>\nPercentPipe<\/h3>\n
formatPercent()<\/code><\/a> outside templates.<\/p>\n<!-- Signature -->\n{{ value_expression | percent [ : digitsInfo [ : locale ] ] }}\n\n<!-- Example -->\n26% => {{ 0.259 | percent }}\n<\/code><\/pre>\nDatePipe<\/h3>\n
Date<\/code>, a number (ms since UTC epoch), or an ISO string<\/a>
Use formatDate()<\/code><\/a> outside templates instead!<\/p>\ngetLocaleDayNames<\/code> etc have been deprecated in favor of using Intl<\/code><\/a>.<\/p>\n<!-- Signature -->\n{{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }}\n\n<!-- Basic examples -->\nMay 1, 2019 => {{ Date.parse('2019-05-01') | date }}\n2019-05-01 23:55:00 => {{ Date.parse('2019-05-01T23:55:00') | date:'yyyy-MM-dd HH:mm:ss' }}\n\n<!-- Full blown example -->\n1 mai 2019, 21h00 => {{ Date.parse('2019-05-01T23:55:00') | date:\"d MMMM yyyy, HH'h'mm\":'-0055':'fr' }}\n<\/code><\/pre>\n\n
Array Pipes<\/h2>\n
SlicePipe (Impure)<\/small><\/h3>\n
<!-- Signature -->\n{{ value_expression | slice : start [ : end ] }}\n\n<!-- Examples -->\n[ 0, 1 ] => {{ [0, 1, 2, 3, 4] | slice:0:2 | json }}\n \n[ 4 ] => {{ [0, 1, 2, 3, 4] | slice:-1 | json }}\n\n[ 0, 1 ] => {{ [0, 1, 2, 3, 4] | slice:-5:2 | json }}\n\n[ 0, 1, 2 ] => {{ [0, 1, 2, 3, 4] | slice:-5:-2 | json }}\n<\/code><\/pre>\nKeyValuePipe (Impure)<\/small><\/h3>\n
<div *ngFor=\"let item of object | keyvalue:compareFn\">\n {{item.key}} => {{item.value}}\n<\/div>\n<\/code><\/pre>\ncompareFn<\/code> parameter signature defined in component.ts<\/code>:<\/p>\nexport class AppComponent {\n object = {key1: 1, key2: 2};\n\n \/\/ revert sorting of this.object keys\n \/\/ interface KeyValue<K, V>{key: K, Value: V}\n compareFn(a: KeyValue<string, number>, b: KeyValue<string, number>) {\n return b.key.localeCompare(a.key);\n }\n}\n<\/code><\/pre>\n\n
let item of object | keyvalue:compareFn<\/code>: key2 => 2<\/code> and key1 => 1<\/code><\/li>\nlet item of object | keyvalue<\/code>: key1 => 1<\/code> and key2 => 2<\/code><\/li>\n<\/ul>\nAsyncPipe (Impure)<\/small><\/h2>\n
ngOnDestroy<\/code>.<\/p>\nAsyncPipe<\/code> instead of .subscribe()<\/code> in TS.
Do keep track on your DevTools Network Tab though, make sure you are not performing the same http call multiple times when rendering a component!<\/p>\nTime: {{ time$ | async }}\n\n<!-- Capture the value without re-evaluating time$ -->\n<div *ngIf=\"time$ | async as time; else loading\">\n {{ time }}\n<\/div>\n<ng-template #loading>\n Waiting...\n<\/ng-template>\n<\/code><\/pre>\ntime$<\/code> is an Observable or a Promise. Ex:<\/p>\nexport class AppComponent {\n time$ = interval(1000).pipe(\n map(() => new Date().toString())\n )\n}\n<\/code><\/pre>\ni18n Pipes<\/h2>\n
I18nPluralPipe<\/h3>\n
{{ some_number | i18nPlural: pluralItemsMap }}\n\nconst pluralItemsMap = {\n '=0': 'zero items',\n '=1': 'one item',\n 'other': '# items',\n}\n<\/code><\/pre>\nI18nSelectPipe<\/h3>\n
{{ 'F' | i18nSelect: genderMap }}\n\nconst genderMap = {\n 'M': 'Mr',\n 'F': 'Ms',\n 'X': 'Mx',\n}\n<\/code><\/pre>\nCustom Pipes<\/h1>\n
Creation<\/h2>\n
ng generate<\/code><\/a><\/p>\nng g pipe <name> options\n<\/code><\/pre>\n\n
--export=false<\/code>: Add to module declarations and exports?<\/li>\n--flat=true<\/code>: Write at the top level of the project<\/li>\n--lintFix=false<\/code><\/li>\n--module=<\/code> and --project=<\/code><\/li>\n--skipImport=false<\/code> and --skipTests=false<\/code><\/li>\n<\/ul>\nExample<\/h2>\n
import { Pipe, PipeTransform } from '@angular\/core';\n\n\/\/ Usage: \n\/\/ 15:30 => {{ someDate | hours }}\n\/\/ 15h => {{ someDate | hours:true:false }}\n\n@Pipe({name: 'hours', pure: true})\nexport class HoursPipe implements PipeTransform {\n transform(value: Date, showHours = true, showMinutes = true): string {\n value = new Date(value);\n if (showMinutes) {\n return value.getHours() + ':' + value.getMinutes();\n }\n return value.getHours() + 'h';\n }\n}\n<\/code><\/pre>\nInstallation<\/h2>\n
ng generate<\/code>.<\/p>\n@NgModule({\n declarations: [AppComponent, CustomPipe],\n exports: [CustomPipe] \/\/ Also add to `exports` when declaring in a shared module.\n})\n<\/code><\/pre>\nTesting<\/h2>\n
ng test<\/code>.<\/p>\nimport { HoursPipe } from '.\/hours.pipe';\n\ndescribe('HoursPipe', () => {\n const someDate = new Date('2000-01-01T15:30:00');\n let pipe: HoursPipe;\n\n beforeEach(() => {\n pipe = new HoursPipe();\n });\n\n it('shows h:M by default', () => {\n const result = pipe.transform(someDate);\n expect(result).toBe('15:30');\n });\n\n it('shows 15h with arguments {{ value | hours:true:false }}', () => {\n const result = pipe.transform(someDate, true, false);\n expect(result).toBe('15h');\n });\n});\n<\/code><\/pre>\nReal World Examples<\/h1>\n
Nl2brPipe<\/h2>\n
<br><\/code>s.<\/p>\nimport { Pipe, PipeTransform } from '@angular\/core';\n\n\/\/ Usage: <div [innerHTML]=\"'Line1nLine2' | nl2br\"><\/div>\n\n\/\/ Combine with ngx-translate\n\/\/ Usage: <div [innerHTML]=\"'resource.key' | translate | nl2br\"><\/div>\n\n@Pipe({name: 'nl2br'})\nexport class Nl2brPipe implements PipeTransform {\n transform(value: string): string {\n return value.replace(\/n\/g, '<br \/>');\n }\n}\n<\/code><\/pre>\nUCFirstPipe<\/h2>\n
capitalize<\/code> (capitalize each word) is bundled with Angular, one to capitalize just the first letter is not.<\/p>\n@Pipe({ name: 'ucfirst' })\nexport class UcFirstPipe implements PipeTransform {\n transform(text: any): string {\n if (typeof text !== 'string') {\n return text;\n }\n return text.slice(0, 1).toUpperCase() + text.slice(1);\n }\n}\n<\/code><\/pre>\nBytesPipe<\/h2>\n
\/\/ Usage: 1024\n\n@Pipe({ name: 'bytes' })\nexport class BytesPipe implements PipeTransform {\n private dict: Array<{max: number; type: string}> = [\n { max: 1024, type: 'B' },\n { max: 1048576, type: 'KB' },\n { max: 1073741824, type: 'MB' },\n { max: 1.0995116e12, type: 'GB' },\n ];\n\n transform(value: number, precision: number = 0): string | number {\n if (isNaN(parseFloat(String(value))) || !isFinite(value)) {\n return NaN;\n }\n\n const format = this.dict.find(d => value < d.max) || this.dict[this.dict.length - 1];\n const calc = value \/ (format.max \/ 1024);\n const num = this.applyPrecision(calc, precision);\n\n return `${num}${format.type}`;\n }\n\n applyPrecision(num: number, precision: number) {\n if (precision <= 0) {\n return Math.round(num);\n }\n\n const tho = 10 ** precision;\n return Math.round(num * tho) \/ tho;\n }\n}\n<\/code><\/pre>\nngx-pipes<\/h2>\n
![](\"https:\/\/img.shields.io\/github\/stars\/danrevah\/ngx-pipes.svg?style=social&label=Star\")
<\/a>danrevah\/ngx-pipes<\/a>:<\/p>\nnpm install ngx-pipes --save\n<\/code><\/pre>\nimport { NgPipesModule } from 'ngx-pipes';\n\n\/\/ Each pipe is also exposed separately\n\/\/ ex: import { ReversePipe, LeftTrimPipe } from 'ngx-pipes';\n\n@NgModule({\n imports: [NgPipesModule]\n})\n<\/code><\/pre>\nangular-pipes<\/h2>\n
![](\"https:\/\/img.shields.io\/github\/stars\/fknop\/angular-pipes.svg?style=social&label=Star\")
<\/a>fknop\/angular-pipes<\/a>:<\/p>\nnpm install angular-pipes --save\n<\/code><\/pre>\nimport { NgModule } from '@angular\/core';\n\nimport {\n NgAggregatePipesModule, NgArrayPipesModule, \n NgBooleanPipesModule, NgMathPipesModule,\n NgObjectPipesModule, NgStringPipesModule,\n} from 'angular-pipes';\n\n\/\/ Import all pipes\n\/\/ import { NgPipesModule } from 'angular-pipes';\n\n@NgModule({\n imports: [\n NgArrayPipesModule,\n NgStringPipesModule,\n ]\n})\nexport class MyApplicationModule {}\n<\/code><\/pre>\nExtras<\/h1>\n
\n
\n
Updates<\/h1>\n
\n
Package Versions <\/i><\/h1>\n
![](\"https:\/\/img.shields.io\/github\/stars\/angular\/angular.svg?style=social&label=Star\")
<\/a>angular\/angular<\/a>: v18 <\/div>\n","protected":false},"excerpt":{"rendered":"\n
<!-- This does exactly what you'd think -->\n{{ value | uppercase }}\n<\/code><\/pre>\n","protected":false},"author":1,"featured_media":2091,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[3],"tags":[23,13,6],"class_list":["post-1615","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-angular","tag-cheat-sheet","tag-tutorial"],"acf":[],"yoast_head":"\n