UNPKG

29.7 kBMarkdownView Raw
1<p align="center">
2<img
3 src="assets/ngx-logo.png" width="160" border="0" alt="NGX-PIPES">
4<br/><br/>
5<a href="https://www.npmjs.com/package/ngx-pipes"><img src="https://img.shields.io/npm/v/ngx-pipes.svg?style=flat-square" alt="npm"></a>
6<a href="http://packagequality.com/#?package=ngx-pipes"><img src="http://npm.packagequality.com/shield/ngx-pipes.svg?style=flat-square" alt="Package Quality"></a>
7<a href="https://travis-ci.org/danrevah/ngx-pipes"><img src="https://img.shields.io/travis/danrevah/ngx-pipes.svg?style=flat-square" alt="Travis"></a>
8<a href="https://coveralls.io/github/danrevah/ngx-pipes?branch=master"><img src="https://img.shields.io/coveralls/danrevah/ngx-pipes.svg?style=flat-square" alt="Coveralls"></a>
9<a href="https://www.npmjs.com/package/ngx-pipes"><img src="https://img.shields.io/npm/dm/ngx-pipes.svg?style=flat-square" alt="npm"></a>
10<a href="https://github.com/danrevah/ngx-pipes/blob/master/LICENSE.md"><img src="https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square" alt="MIT licensed"></a>
11<br/><br/>
12 Useful pipes for Angular with no external dependencies
13<br/><br/>
14</p>
15
16<b><a href="https://github.com/danrevah/typeserializer" target="_blank">TypeSerializer</a> - Another library you might find interesting. Serializer / Deserializer, designed to make prettier code while using decorators (Can be used both with Angular or Node.js).</b>
17
18## Table of contents
19
20 - [Installation](#installation)
21 - [Contributing](#contributing)
22 - [Changelog](CHANGELOG.md)
23 - [String](#string)
24 - [aOrAn](#aoran)
25 - [repeat](#repeat)
26 - [scan](#scan)
27 - [shorten](#shorten)
28 - [stripTags](#striptags)
29 - [ucfirst](#ucfirst)
30 - [ucwords](#ucwords)
31 - [trim](#trim)
32 - [ltrim](#ltrim)
33 - [rtrim](#rtrim)
34 - [reverse](#reverse)
35 - [slugify](#slugify)
36 - [camelize](#camelize)
37 - [latinise](#latinise)
38 - [lines](#lines)
39 - [underscore](#underscore)
40 - [test](#test)
41 - [match](#match)
42 - [lpad](#lpad)
43 - [rpad](#rpad)
44 - [makePluralString](#makepluralstring)
45 - [wrap](#wrap)
46 - [Array](#Array)
47 - [diff](#diff)
48 - [flatten](#flatten)
49 - [initial](#initial)
50 - [intersection](#intersection)
51 - [range](#range)
52 - [reverse](#reverse)
53 - [tail](#tail)
54 - [truthify](#truthify)
55 - [union](#union)
56 - [unique](#unique)
57 - [without](#without)
58 - [pluck](#pluck)
59 - [shuffle](#shuffle)
60 - [every](#every)
61 - [some](#some)
62 - [sample](#sample)
63 - [groupBy](#groupby)
64 - [groupByImpure](#groupbyimpure)
65 - [filterBy](#filterby)
66 - [filterByImpure](#filterbyimpure)
67 - [orderBy](#orderby)
68 - [orderByImpure](#orderbyimpure)
69 - [Object](#object)
70 - [keys](#keys)
71 - [values](#values)
72 - [pairs](#pairs)
73 - [pick](#pick)
74 - [omit](#omit)
75 - [invert](#invert)
76 - [invertBy](#invertby)
77 - [diffObj](#diffobj)
78 - [Math](#math)
79 - [min](#min)
80 - [max](#max)
81 - [sum](#sum)
82 - [percentage](#percentage)
83 - [ceil](#ceil)
84 - [floor](#floor)
85 - [round](#round)
86 - [sqrt](#sqrt)
87 - [pow](#pow)
88 - [degrees](#degrees)
89 - [radians](#radians)
90 - [bytes](#bytes)
91 - [Boolean](#boolean)
92 - [isNull](#isnull)
93 - [isDefined](#isdefined)
94 - [isUndefined](#isundefined)
95 - [isString](#isstring)
96 - [isFunction](#isfunction)
97 - [isNumber](#isnumber)
98 - [isArray](#isarray)
99 - [isObject](#isobject)
100 - [isGreaterThan](#isgreaterthan)
101 - [isGreaterEqualThan](#isgreaterequalthan)
102 - [isLessThan](#islessthan)
103 - [isLessEqualThan](#islessequalthan)
104 - [isEqualTo](#isequalto)
105 - [isNotEqualTo](#isnotequalto)
106 - [isIdenticalTo](#isidenticalto)
107 - [isNotIdenticalTo](#isnotidenticalto)
108
109
110## Installation
111
1121. Use npm to install the package
113
114 ```terminal
115 $ npm install ngx-pipes --save
116 ```
117
1182. You could either add into your module `imports` the `NgPipesModule` in order to add all of the pipes, Or add a specific module such as `NgArrayPipesModule`, `NgObjectPipesModule`, `NgStringPipesModule`, `NgMathPipesModule` or `NgBooleanPipesModule`.
119
120 ```typescript
121 import {NgPipesModule} from 'ngx-pipes';
122
123 @NgModule({
124 // ...
125 imports: [
126 // ...
127 NgPipesModule
128 ]
129 })
130 ```
131
1323. Pipes are also injectable and can be used in Components / Services / etc..
133
134 ```typescript
135 import {ReversePipe} from 'ngx-pipes';
136
137 @Component({
138 // ..
139 providers: [ReversePipe]
140 })
141 export class AppComponent {
142 constructor(private reversePipe: ReversePipe) {
143 this.reversePipe.transform('foo'); // Returns: "oof"
144 }
145 // ..
146 }
147 ```
148
1494. You can also use pipes as part of your template for ex.
150
151```html
152<p>{{ 'foo' | reverse }}</p> <!-- Output: "oof" -->
153```
154
155and it's also possible to stack multiple pipes
156
157```html
158<p>{{ ' foo' | ltrim | reverse }}</p> <!-- Output: "oof" -->
159```
160
161
162## String
163
164### aOrAn
165
166Prefixes input string with "a" or "an".
167
168**Usage:** `string | aOrAn`
169
170```html
171<span>This is a picture of {{imageDescription | aOrAn}}</span>
172```
173
174### repeat
175
176Repeats a string n times
177
178**Usage:** `string | repeat: times: [separator|optional]`
179
180```html
181<p>{{ 'example' | repeat: 3: '@' }}</p> <!-- Output: "example@example@example" -->
182```
183
184### scan
185
186Scans string and replace `{i}` placeholders by equivalent member of the array
187
188**Usage:** `string | scan: [ARRAY]`
189
190```html
191<p>{{'Hey {0}, {1}' | scan: ['foo', 'bar']}}</p> <!-- Output: "Hey foo, bar" -->
192```
193
194### shorten
195
196Shortening a string by length and providing a custom string to denote an omission
197
198**Usage:** `string | shorten: length: [suffix|optional]: [wordBreak boolean|optional]`
199
200```html
201<p>{{'Hey foo bar' | shorten: 3: '...'}}</p> <!-- Output: "Hey..." -->
202```
203
204### stripTags
205
206Strips a HTML tags from string and providing which tags should not be removed
207
208**Usage:** `string | stripTags: [ARRAY]`
209
210```html
211<p>{{'<a href="">foo</a> <p class="foo">bar</p>' | stripTags }}</p> <!-- Output: "foo bar" -->
212<p>{{'<a href="">foo</a> <p class="foo">bar</p>' | stripTags: 'p'}}</p> <!-- Output: foo <p class="foo">bar</p> -->
213```
214
215### ucfirst
216
217Uppercase first letter of first word
218
219```html
220<p>{{'foo bar' | ucfirst }}</p> <!-- Output: "Foo bar" -->
221```
222
223### ucwords
224
225Uppercase first letter every word
226
227```html
228<p>{{'foo bar' | ucwords }}</p> <!-- Output: "Foo Bar" -->
229<p>{{'shaquille o'neal' | ucwords }}</p> <!-- Output: "Shaquille O'Neal" -->
230```
231
232### trim
233
234Strips characters from the beginning and end of a string (default character is space).
235
236**Usage:** `string | trim: [characters|optional]`
237
238```html
239<p>{{' foo ' | trim }}</p> <!-- Output: "foo" -->
240<p>{{'foobarfoo' | trim: 'foo' }}</p> <!-- Output: "bar" -->
241```
242
243### ltrim
244
245Strips characters from the beginning of a string (default character is space).
246
247**Usage:** `string | ltrim: [characters|optional]`
248
249```html
250<p>{{' foo ' | ltrim }}</p> <!-- Output: "foo " -->
251<p>{{'foobarfoo' | ltrim: 'foo' }}</p> <!-- Output: "barfoo" -->
252```
253
254### rtrim
255
256Strips characters from the end of a string (default character is space).
257
258**Usage:** `string | rtrim: [characters|optional]`
259
260```html
261<p>{{' foo ' | rtrim }}</p> <!-- Output: " foo" -->
262<p>{{'foobarfoo' | rtrim: 'foo' }}</p> <!-- Output: "foobar" -->
263```
264
265### reverse
266
267Reverses a string
268
269**Usage:** `string | reverse`
270
271```html
272<p>{{'foo bar' | reverse }}</p> <!-- Output: "rab oof" -->
273```
274
275### slugify
276
277Slugify a string (lower case and add dash between words).
278
279**Usage:** `string | slugify`
280
281```html
282<p>{{'Foo Bar' | slugify }}</p> <!-- Output: "foo-bar" -->
283<p>{{'Some Text To Slugify' | slugify }}</p> <!-- Output: "some-text-to-slugify" -->
284```
285
286### camelize
287
288Camelize a string replaces dashes and underscores and converts to camelCase string.
289
290**Usage:** `string | camelize`
291
292```html
293<p>{{'foo_bar' | camelize }}</p> <!-- Output: "fooBar" -->
294<p>{{'some_dashed-with-underscore' | camelize }}</p> <!-- Output: "someDashedWithUnderscore" -->
295<p>{{'-dash_first-' | camelize }}</p> <!-- Output: "dashFirst" -->
296```
297
298### latinise
299
300Removes accents from Latin characters.
301
302**Usage:** `string | latinise`
303
304```html
305<p>{{'Féé' | latinise }}</p> <!-- Output: "Fee" -->
306<p>{{'foo' | latinise }}</p> <!-- Output: "foo" -->
307```
308
309### lines
310
311Converts a string with new lines into an array of each line.
312
313**Usage:** `string | lines`
314
315```html
316<p>{{'Some\nSentence with\r\nNew line' | lines }}</p> <!-- Output: "['Some', 'Sentence with', 'New line']" -->
317```
318
319### underscore
320
321Converts camelCase string to underscore.
322
323**Usage:** `string | underscore`
324
325```html
326<p>{{'angularIsAwesome' | underscore }}</p> <!-- Output: "angular_is_awesome" -->
327<p>{{'FooBar' | underscore }}</p> <!-- Output: "foo_bar" -->
328```
329
330### test
331
332Tests if a string matches a pattern.
333
334**Usage:** `string | test: {RegExp}: {Flags}`
335
336```html
337<p>{{'foo 42' | test: '[\\d]+$': 'g' }}</p> <!-- Output: true -->
338<p>{{'42 foo' | test: '[\\d]+$': 'g' }}</p> <!-- Output: false -->
339<p>{{'FOO' | test: '^foo': 'i' }}</p> <!-- Output: true -->
340```
341
342### match
343
344Returns array of matched elements in string.
345
346**Usage:** `string | match: {RegExp}: {Flags}`
347
348```html
349<p>{{'foo 42' | match: '[\\d]+$': 'g' }}</p> <!-- Output: '42' -->
350<p>{{'42 foo' | match: '[\\d]+$': 'g' }}</p> <!-- Output: null -->
351<p>{{'FOO' | match: '^foo': 'i' }}</p> <!-- Output: 'FOO' -->
352```
353
354### lpad
355
356Left pad a string to a given length using a given pad character (default is a space)
357
358
359**Usage:** `string | lpad: length: [padCharacter:string|optional]`
360
361```html
362<p>{{'foo' | lpad: 5}}</p> <!-- Output: " foo" -->
363<!-- Cast a number to string in order to left pad it with zeros -->
364<p>{{String(3) | lpad: 5: '0'}}</p> <!-- Output: "00003" -->
365```
366
367### rpad
368
369Right pad a string to a given length using a given pad character (default is a space)
370
371
372**Usage:** `string | rpad: length: [padCharacter:string|optional]`
373
374```html
375<p>{{'Foo' | rpad: 5: '#'}}</p> <!-- Output: "Foo##" -->
376```
377
378### makePluralString
379
380Make a singular string plural. Optional `quantity` argument specifies how many of the singular string there are.
381
382**Usage:** `string | makePluralString: [quantity:string|optional]`
383
384```html
385<span>{{'Painting' | makePluralString}}</span> <!-- Output: "Paintings" -->
386<span>{{'Painting' | makePluralString: 1}}</span> <!-- Output: "Painting" -->
387<span>{{'One Painting' | makePluralString: 1}}</span> <!-- Output: "One Painting" -->
388<span>{{'Painting' | makePluralString: 4}}</span> <!-- Output: "Paintings" -->
389<span>{{'Four Painting' | makePluralString: 4}}</span> <!-- Output: "Four Paintings" -->
390```
391
392
393### wrap
394
395Wrap a string between a prefix and a suffix
396
397
398**Usage:** `string | wrap: prefix: suffix`
399
400```html
401<p>{{'Foo' | wrap: 'nice prefix ': ' and awesome suffix!'}}</p> <!-- Output: "nice prefix Foo and awesome suffix!" -->
402```
403
404## Array
405
406### diff
407
408Returns array of diff between arrays
409
410**Usage:** `array | diff: [ARRAY]: [ARRAY]: ... : [ARRAY]`
411
412```typescript
413this.items = [1, 2, 3, 4];
414```
415
416```html
417<li *ngFor="let item of items | diff: [1, 2]"> <!-- Array: [3, 4] -->
418```
419
420### flatten
421
422Flattens nested array, passing shallow will mean it will only be flattened a single level
423
424**Usage:** `array | flatten: [shallow|optional]`
425
426```typescript
427this.items = [1,2,3,[4,5,6,[7,8,9],[10,11,12,13,[14],[15],[16, [17]]]]];
428```
429
430```html
431<li *ngFor="let item of items | flatten">
432<!-- Array: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17] -->
433```
434
435### initial
436
437Slicing off the end of the array by n elements
438
439**Usage:** `array | initial: n`
440
441```typescript
442this.items = [first, second, third];
443```
444
445```html
446<li *ngFor="let item of items | initial: 1"> <!-- Array: [first, second] -->
447```
448
449### tail
450
451Slicing off the start of the array by n elements
452
453**Usage:** `array | tail: n`
454
455```typescript
456this.items = [first, second, third];
457```
458
459```html
460<li *ngFor="let item of items | tail: 1"> <!-- Array: [second, third] -->
461```
462
463### intersection
464
465Returns the intersections of an arrays
466
467**Usage:** `array | intersection: [ARRAY]: [ARRAY]: ... : [ARRAY]`
468
469```typescript
470this.items = [1, 2, 3, 4, 5];
471```
472
473```html
474<li *ngFor="let item of items | intersection: [1, 2, 3]: [3, 6]"> <!-- Array: [3] -->
475```
476
477### range
478
479Returns an array with range of numbers
480
481**Usage:** `range: [start: number, default = '1']: [count: number]: [step: number | optional, default = '1']`
482
483```typescript
484this.items = this.rangePipe.transform(1, 5); // Returns: [1, 2, 3, 4, 5]
485```
486
487```html
488<li *ngFor="let item of items"> <!-- Array: [1, 2, 3, 4, 5] -->
489```
490
491### reverse
492
493Reverses an array
494
495**Usage:** `array | reverse`
496
497```typescript
498this.items = [1, 2, 3];
499```
500
501```html
502<li *ngFor="let item of items | reverse"> <!-- Array: [3, 2, 1] -->
503```
504
505### truthify
506
507Removes un-truthy values from array
508
509**Usage:** `array | truthify`
510
511```typescript
512this.items = [null, 1, false, undefined, 2, 0, 3, NaN, 4, ''];
513```
514
515```html
516<li *ngFor="let item of items | truthify"> <!-- Array: [1, 2, 3, 4] -->
517```
518
519### union
520
521Combine two arrays
522
523**Usage:** `array | union: [ARRAY]`
524
525```typescript
526this.items = [1, 2, 3];
527```
528
529```html
530<li *ngFor="let item of items | union: [[4]]"> <!-- Array: [1, 2, 3, 4] -->
531```
532
533### unique
534
535Removes duplicates from array
536
537**Usage:** `array | unique: 'Property (Optional)'`
538
539```typescript
540this.items = [1, 2, 3, 1, 2, 3];
541```
542
543```html
544<li *ngFor="let item of items | unique"> <!-- Array: [1, 2, 3] -->
545```
546
547### without
548
549Returns array without specific elements
550
551**Usage:** `array | without: [ARRAY]`
552
553```typescript
554this.items = [1, 2, 3, 1, 2, 3];
555```
556
557```html
558<li *ngFor="let item of items | without: [1,3]"> <!-- Array: [2, 2] -->
559```
560
561### pluck
562
563Returns array of properties values
564
565**Usage:** `array | pluck: propertyName`
566
567```typescript
568this.items = [
569 {
570 a: 1,
571 b: {
572 c: 4
573 }
574 },
575 {
576 a: 2,
577 b: {
578 c: 5
579 }
580 },
581 {
582 a: 3,
583 b: {
584 c: 6
585 }
586 },
587];
588```
589
590```html
591<li *ngFor="let item of items | pluck: 'a'"> <!-- Array: [1, 2, 3] -->
592<li *ngFor="let item of items | pluck: 'b.c'"> <!-- Array: [4, 5, 6] -->
593```
594
595### shuffle
596
597Returns randomly shuffled array
598
599**Usage:** `array | shuffle`
600
601```typescript
602this.items = [1, 2, 3, 4, 5, 6];
603```
604
605```html
606<li *ngFor="let item of items | shuffle"> <!-- Array: [4, 1, 6, 2, 5, 3] -->
607```
608
609### every
610
611Returns true if every elements of the array fits the predicate otherwise false
612
613**Usage:** `array | every: predicate`
614
615```typescript
616this.itemsOne = [1, 1, 1];
617this.itemsTwo = [1, 1, 2];
618this.itemsThree = [2, 2, 2];
619this.predicate = (value: any, index: number, array: any[]): boolean => {
620 return value === 1;
621};
622```
623
624```html
625<p>{{ itemsOne | every: predicate }}</p> <!-- Output: "true" -->
626<p>{{ itemsTwo | every: predicate }}</p> <!-- Output: "false" -->
627<p>{{ itemsThree | every: predicate }}</p> <!-- Output: "false" -->
628```
629
630### some
631
632Returns true if some elements of the array fits the predicate otherwise false
633
634**Usage:** `array | some: predicate`
635
636```typescript
637this.itemsOne = [1, 1, 1];
638this.itemsTwo = [1, 1, 2];
639this.itemsThree = [2, 2, 2];
640this.predicate = (value: any, index: number, array: any[]): boolean => {
641 return value === 1;
642};
643```
644
645```html
646<p>{{ itemsOne | some: predicate }}</p> <!-- Output: "true" -->
647<p>{{ itemsTwo | some: predicate }}</p> <!-- Output: "true" -->
648<p>{{ itemsThree | some: predicate }}</p> <!-- Output: "false" -->
649```
650
651### sample
652
653Returns sample items randomly from array
654
655**Usage:** `array | sample: [amount | default = 1]`
656
657```html
658<p>{{ [1, 2, 3, 4] | sample }}</p> <!-- Output: "[2]" -->
659<p>{{ [1, 2, 3, 4] | sample: 2 }}</p> <!-- Output: "[4, 3]" -->
660```
661
662### groupBy
663
664Returns object of grouped by items by discriminator, and supports nested properties.
665
666**Usage:** `array | groupBy: [string[] | string | Function]: [delimiter: string | optional, default = '|']`
667
668```typescript
669this.arrayObject = [
670 {id: 1, elm: 'foo', value: 0},
671 {id: 2, elm: 'bar', value: 1},
672 {id: 3, elm: 'foo', value: 2},
673 {id: 4, elm: 'foo', value: 2}
674];
675
676this.arrayNestedObject = [
677 {id: 1, prop: { deep: 'foo' }},
678 {id: 2, prop: { deep: 'bar' }},
679 {id: 3, prop: { deep: 'foo' }},
680 {id: 4, prop: { deep: 'bar' }}
681];
682```
683
684```html
685<p>{{ arrayObject | groupBy: 'elm' }}</p>
686<!-- Output: "{foo: [{id: 1, elm: 'foo', value: 0}, {id: 3, elm: 'foo', value: 2}, {id: 4, elm: 'foo', value: 2}], bar: [{id: 2, elm: 'bar', value: 1}]}" -->
687
688<p>{{ arrayObject | groupBy: ['elm', 'value'] }}</p>
689<!-- Output: "{'foo|0': [{elm: foo, value: 0}], 'bar|1': [{elm:bar,value: 1}], 'foo|2': [{elm:foo, value: 2}], 'bar|3': [{elm:bar, value: 3}]}" -->
690
691<p>{{ arrayObject | groupBy: ['elm', 'value']: '_' }}</p>
692<!-- Output: "{foo_0: [{elm: foo, value: 0}], bar_1: [{elm:bar,value: 1}], foo_2: [{elm:foo, value: 2}], bar_3: [{elm:bar, value: 3}]}" -->
693
694<p>{{ arrayNestedObject | groupBy: 'prop.deep' }}</p>
695<!-- Output:{foo: [{id: 1, prop: {deep: foo}}, {id: 3, prop: {deep: foo}}], bar: [{id: 2, prop: {deep: bar}}, {id: 4, prop: {deep: bar}}]}" -->
696```
697
698## groupByImpure
699
700Identical to groupBy pipe, the only difference is that it's an impure pipe.
701
702Impure pipes: https://angular.io/guide/pipes#impure-pipes
703
704### filterBy
705
706Returns object array of grouped by items by discriminator
707
708**Usage:** `array | filterBy: [prop, nested.prop, ...]: search: [strict | optional]`
709
710```typescript
711this.users = [
712 {id: 1, first_name: 'John', last_name: 'Doe', work: { company: 'Foo Tech' }},
713 {id: 2, first_name: 'Jane', last_name: 'West', work: { company: 'AAA Solutions' }},
714 {id: 3, first_name: 'Bruce', last_name: 'John', work: { company: 'Bar Tech' }},
715 {id: 4, first_name: 'William', last_name: 'Cent', work: { company: 'Foo Tech' }, arr: [{name: 'foo'}]}
716];
717```
718
719```html
720<!-- Returns users with `id` of 1 -->
721<p>{{ users | filterBy: ['id']: 1 }}</p>
722<!-- Output: "[{id: 1, first_name: 'John', last_name: 'Doe', work: { company: 'Foo Tech', previous_company: '' }}]" -->
723
724<!-- filterBy also support nested properties -->
725<p>{{ users | filterBy: ['work.company']: 'Bar Tech' }}</p>
726<!-- Output: "[{ "id": 3, "first_name": "Bruce", "last_name": "John", "work": { "company": "Bar Tech", "previous_company": "" } }]" -->
727
728<!-- filterBy also support nested properties inside of an array -->
729<p>{{ users | filterBy: ['arr.name']: 'foo' }}</p>
730<!-- Output: "[{id: 4, first_name: 'William', last_name: 'Cent', work: { company: 'Foo Tech' }, arr: [{name: 'foo'}]}]" -->
731
732<!-- Return users whose first name or last name is 'John'. -->
733<p>{{ users | filterBy: ['first_name', 'last_name']: 'John' }}</p>
734<!-- Output: "[{id: 1, first_name: 'John', last_name: 'Doe', work: { company: 'Foo Tech', previous_company: '' }}]" -->
735
736<!-- Return users whose first name or last name is 'John' or 'Cent'. -->
737<p>{{ users | filterBy: ['first_name', 'last_name']: ['John', 'Cent'] }}</p>
738<!-- Output: "[{id: 1, first_name: 'John', last_name: 'Doe', work: { company: 'Foo Tech', previous_company: '' }}, {id: 3, first_name: 'Bruce', last_name: 'John', work: { company: 'Bar Tech' }}, {id: 4, first_name: 'William', last_name: 'Cent', work: { company: 'Foo Tech' }, arr: [{name: 'foo'}]}]" -->
739```
740
741## filterByImpure
742
743Identical to filterBy pipe, the only difference is that it's an impure pipe.
744
745Impure pipes: https://angular.io/guide/pipes#impure-pipes
746
747### orderBy
748
749Returns ordered array by configuration
750
751**Usage:** `array | orderBy: [prop, nested.prop, array of props, ...]`
752
753```typescript
754const numbers = [2, 1, 3];
755
756const obj = [
757 {id: 4, name: 'Dave', amount: 2},
758 {id: 2, name: 'Michael', amount: 2},
759 {id: 3, name: 'Dan', amount: 1},
760 {id: 1, name: 'John', amount: 1}
761];
762
763const deepObj = [
764 {id: 1, name: 'John', amount: 1337, deep: {prop: 4}},
765 {id: 2, name: 'Michael', amount: 42, deep: {prop: 2}},
766 {id: 3, name: 'Dan', amount: 1, deep: {prop: 1}},
767 {id: 4, name: 'Dave', amount: 2, deep: {prop: 3}}
768];
769```
770
771```html
772<!-- Returns array ordered by value -->
773<p>{{ numbers | orderBy }}</p> <!-- Output: [1, 2, 3] -->
774<p>{{ numbers | orderBy: '-' }}</p> <!-- Output: [3, 2, 1] -->
775
776<!-- Returns array ordered by value of property -->
777<p>{{ deepObj | orderBy: 'amount' }}</p>
778<!-- Output: [{id: 3, ...}, {id: 4, ...}, {id: 2, ...}, {id: 1, ...}] -->
779<p>{{ deepObj | orderBy: '-amount' }}</p>
780<!-- Output: [{id: 1, ...}, {id: 2, ...}, {id: 4, ...}, {id: 3, ...}] -->
781
782<!-- Returns array ordered by value of deep property -->
783<p>{{ deepObj | orderBy: 'deep.prop' }}</p>
784<!-- Output: [{id: 3, ...}, {id: 2, ...}, {id: 4, ...}, {id: 1, ...}] -->
785<p>{{ deepObj | orderBy: '-deep.prop' }}</p>
786<!-- Output: [{id: 1, ...}, {id: 4, ...}, {id: 2, ...}, {id: 3, ...}] -->
787
788<!-- Returns array ordered by mutliple properties -->
789<p>{{ obj | orderBy: ['amount', 'id'] }}</p>
790<!-- Output: [{id: 1, ...}, {id: 3, ...}, {id: 2, ...}, {id: 4, ...}] -->
791```
792
793## orderByImpure
794
795Identical to orderBy pipe, the only difference is that it's an impure pipe.
796
797Impure pipes: https://angular.io/guide/pipes#impure-pipes
798
799## Object
800
801### keys
802
803Returns array of object keys
804
805**Usage:** `object | keys`
806
807```html
808<p>{{ {foo: 1, bar: 2} | keys }}</p> <!-- Output: "['foo', 'bar']" -->
809```
810
811### values
812
813Returns array of object values
814
815**Usage:** `object | values`
816
817```html
818<p>{{ {foo: 1, bar: 2} | values }}</p> <!-- Output: "[1, 2]" -->
819```
820
821### pairs
822
823Returns array of an object key value pairs
824
825**Usage:** `object | pairs`
826
827```html
828<p>{{ {foo: 1, bar: 2} | pairs }}</p> <!-- Output: "[['foo', 1], ['bar', 2]]" -->
829<p>{{ {foo: [1, 2], bar: [3, 4]} | pairs }}</p> <!-- Output: "[['foo', [1, 2]], ['bar', [3, 4]]]" -->
830```
831
832### pick
833
834Returns object with picked keys from object
835
836**Usage:** `object | pick: [key | string]]`
837
838```html
839<p>{{ {foo: 1, bar: 2} | pick: 'foo' }}</p> <!-- Output: "{foo: 1}" -->
840<p>{{ {foo: 1, bar: 2} | pick: 'foo': 'bar' }}</p> <!-- Output: "{foo: 1, bar: 2}" -->
841```
842
843### omit
844
845Returns object after omitting keys from object (opposite of pick)
846
847**Usage:** `object | omit: [key | string]]`
848
849```html
850<p>{{ {foo: 1, bar: 2} | omit: 'foo' }}</p> <!-- Output: "{bar: 2}" -->
851<p>{{ {foo: 1, bar: 2} | omit: 'foo': 'bar' }}</p> <!-- Output: "{}" -->
852```
853
854### invert
855
856Returns object with inverted keys and values. in case of equal values, subsequent values overwrite property assignments of previous values.
857
858**Usage:** `object | invert`
859
860```html
861<p>{{ {foo: 1, bar: 2} | invert }}</p> <!-- Output: "{1: 'foo', 2: 'bar'}" -->
862```
863
864### invertBy
865
866Returns object with inverted keys and values. in case of equal values, will add to an array.
867
868**Usage:** `object | invertBy: [Function | optional]`
869
870```typescript
871this.cb = (value): string => {
872 return `name_${value}`;
873};
874```
875
876```html
877<p>{{ {foo: 1, bar: 2} | invertBy }}</p> <!-- Output: "{1: ['foo'], 2: ['bar']}" -->
878<p>{{ {foo: 1, bar: 2} | invertBy: cb }}</p> <!-- Output: "{name_1: ['foo'], name_2: ['bar']}" -->
879<p>{{ {a: 1, b: 2, c: 1, d: 2} | invertBy }}</p> <!-- Output: "{1: ['a', 'c'], 2: ['b', 'd']}" -->
880```
881
882### diffObj
883
884Returns a diff object of two objects
885
886**Usage:** `object | diffObj: Object`
887
888```html
889<p>{{ {a: 1} | diffObj: {a: 1} }}</p> <!-- Output: "{}" -->
890<p>{{ {a: 1} | diffObj: {a: 2} }}</p> <!-- Output: "{a: 1}" -->
891<p>{{ {a: 1, b: 2} | diffObj: {a: 1, b: 1} }}</p> <!-- Output: "{b: 2}" -->
892<p>{{ {a: 1, b: 2, c: {d: 3} } | diffObj: {a: 1, b: 1, c: {d: 1} } }}</p> <!-- Output: "{b: 2, c: {d: 3}}" -->
893```
894
895## Math
896
897### min
898
899Returns the minimum of a given array
900
901**Usage:** `array | min`
902
903```html
904<p>{{ [1, 2, 3, 1, 2, 3] | min }}</p> <!-- Output: "1" -->
905```
906
907### max
908
909Returns the maximum of a given array
910
911**Usage:** `array | max`
912
913```html
914<p>{{ [1, 2, 3, 1, 2, 3] | max }}</p> <!-- Output: "3" -->
915```
916
917### sum
918
919Returns the sum of a given array
920
921**Usage:** `array | sum`
922
923```html
924<p>{{ [1, 2, 3, 4] | sum }}</p> <!-- Output: "10" -->
925```
926
927### percentage
928
929Returns percentage between numbers
930
931**Usage:** `number | percentage: [total | default = 100]: [floor | default = false]`
932
933```html
934<p>{{ 5 | percentage }}</p> <!-- Output: "5" -->
935<p>{{ 5 | percentage: 160 }}</p> <!-- Output: "3.125" -->
936<p>{{ 5 | percentage: 160: true }}</p> <!-- Output: "3" -->
937```
938
939### ceil
940
941Returns ceil of a number by precision
942
943**Usage:** `number | ceil: [precision | default = 0]`
944
945```html
946<p>{{ 42.123 | ceil }}</p> <!-- Output: "43" -->
947<p>{{ 42.123 | ceil: 2 }}</p> <!-- Output: "42.13" -->
948```
949
950### floor
951
952Returns floor of a number by precision
953
954**Usage:** `number | floor: [precision | default = 0]`
955
956```html
957<p>{{ 42.123 | floor }}</p> <!-- Output: "42" -->
958<p>{{ 42.123 | floor: 2 }}</p> <!-- Output: "42.12" -->
959```
960
961### round
962
963Returns round of a number by precision
964
965**Usage:** `number | round: [precision | default = 0]`
966
967```html
968<p>{{ 42.4 | round }}</p> <!-- Output: "42" -->
969<p>{{ 42.5 | round }}</p> <!-- Output: "43" -->
970<p>{{ 42.123 | round: 2 }}</p> <!-- Output: "42.12" -->
971```
972
973### sqrt
974
975Returns the square root of a number
976
977**Usage:** `number | sqrt`
978
979```html
980<p>{{ 9 | sqrt }}</p> <!-- Output: "3" -->
981```
982
983### pow
984
985Returns the power of a number
986
987**Usage:** `number | pow: [power | default = 2]`
988
989```html
990<p>{{ 3 | pow }}</p> <!-- Output: "9" -->
991<p>{{ 3 | pow: 3 }}</p> <!-- Output: "27" -->
992```
993
994### degrees
995
996Returns the degrees of a number in radians
997
998**Usage:** `number | degrees`
999
1000```html
1001<p>{{ 3.141592653589793 | degrees }}</p> <!-- Output: "180" -->
1002```
1003
1004### radians
1005
1006Returns the radians of a number in degrees
1007
1008**Usage:** `number | radians`
1009
1010```html
1011<p>{{ 180 | radians }}</p> <!-- Output: "3.141592653589793" -->
1012```
1013
1014### bytes
1015
1016Returns bytes with a unit symbol
1017
1018**Usage:** `number | bytes: [precision]`
1019
1020```html
1021<p>{{ 10 | bytes }}</p> <!-- Output: "10 B" -->
1022<p>{{ 1048576 | bytes }}</p> <!-- Output: "1 KB" -->
1023<p>{{ 1073741824 | bytes }}</p> <!-- Output: "1 MB" -->
1024<p>{{ 1.0995116e12 | bytes }}</p> <!-- Output: "1 GB" -->
1025```
1026
1027## Boolean
1028
1029### isNull
1030
1031**Usage:** `any | isNull`
1032
1033```html
1034<p>{{ null | isNull }}</p> <!-- Output: "true" -->
1035<p>{{ 1 | isNull }}</p> <!-- Output: "false" -->
1036```
1037
1038### isDefined
1039
1040**Usage:** `any | isDefined`
1041
1042```html
1043<p>{{ 1 | isDefined }}</p> <!-- Output: "true" -->
1044<p>{{ undefined | isDefined }}</p> <!-- Output: "false" -->
1045```
1046
1047### isUndefined
1048
1049**Usage:** `any | isUndefined`
1050
1051```html
1052<p>{{ 1 | isUndefined }}</p> <!-- Output: "false" -->
1053<p>{{ undefined | isUndefined }}</p> <!-- Output: "true" -->
1054```
1055
1056
1057### isString
1058
1059**Usage:** `any | isString`
1060
1061```html
1062<p>{{ 1 | isString }}</p> <!-- Output: "false" -->
1063<p>{{ '' | isString }}</p> <!-- Output: "true" -->
1064```
1065
1066### isNumber
1067
1068**Usage:** `any | isNumber`
1069
1070```typescript
1071this.func = () => {};
1072this.num = 1;
1073```
1074
1075```html
1076<p>{{ num | isNumber }}</p> <!-- Output: "true" -->
1077<p>{{ func | isNumber }}</p> <!-- Output: "false" -->
1078```
1079
1080### isArray
1081
1082**Usage:** `any | isArray`
1083
1084```typescript
1085this.arr = [1, 2];
1086this.num = 1;
1087```
1088
1089```html
1090<p>{{ num | isArray }}</p> <!-- Output: "false" -->
1091<p>{{ arr | isArray }}</p> <!-- Output: "true" -->
1092```
1093
1094### isObject
1095
1096**Usage:** `any | isObject`
1097
1098```typescript
1099this.obj = {a: 1, b: 2};
1100this.num = 1;
1101```
1102
1103```html
1104<p>{{ num | isObject }}</p> <!-- Output: "false" -->
1105<p>{{ obj | isObject }}</p> <!-- Output: "true" -->
1106```
1107
1108### isGreaterThan
1109
1110**Usage:** `number | isGreaterThan: otherNumber`
1111
1112```html
1113<p>{{ 1 | isGreaterThan: 1 }}</p> <!-- Output: "false" -->
1114<p>{{ 1 | isGreaterThan: 2 }}</p> <!-- Output: "false" -->
1115<p>{{ 2 | isGreaterThan: 1 }}</p> <!-- Output: "true" -->
1116```
1117
1118### isGreaterEqualThan
1119
1120**Usage:** `number | isGreaterEqualThan: otherNumber`
1121
1122```html
1123<p>{{ 1 | isGreaterEqualThan: 1 }}</p> <!-- Output: "true" -->
1124<p>{{ 1 | isGreaterEqualThan: 2 }}</p> <!-- Output: "false" -->
1125<p>{{ 2 | isGreaterEqualThan: 1 }}</p> <!-- Output: "true" -->
1126```
1127
1128### isLessThan
1129
1130**Usage:** `number | isLessThan: otherNumber`
1131
1132```html
1133<p>{{ 1 | isLessThan: 1 }}</p> <!-- Output: "false" -->
1134<p>{{ 1 | isLessThan: 2 }}</p> <!-- Output: "true" -->
1135<p>{{ 2 | isLessThan: 1 }}</p> <!-- Output: "false" -->
1136```
1137
1138### isLessEqualThan
1139
1140**Usage:** `number | isLessEqualThan: otherNumber`
1141
1142```html
1143<p>{{ 1 | isLessEqualThan: 1 }}</p> <!-- Output: "true" -->
1144<p>{{ 1 | isLessEqualThan: 2 }}</p> <!-- Output: "true" -->
1145<p>{{ 2 | isLessEqualThan: 1 }}</p> <!-- Output: "false" -->
1146```
1147
1148### isEqualTo
1149
1150**Usage:** `number | isEqualTo: otherNumber`
1151
1152```html
1153<p>{{ 1 | isEqualTo: 1 }}</p> <!-- Output: "true" -->
1154<p>{{ 1 | isEqualTo: '1' }}</p> <!-- Output: "true" -->
1155<p>{{ 1 | isEqualTo: 2 }}</p> <!-- Output: "false" -->
1156<p>{{ 2 | isEqualTo: 1 }}</p> <!-- Output: "false" -->
1157```
1158
1159### isNotEqualTo
1160
1161**Usage:** `number | isNotEqualTo: otherNumber`
1162
1163```html
1164<p>{{ 1 | isNotEqualTo: 1 }}</p> <!-- Output: "false" -->
1165<p>{{ 1 | isNotEqualTo: '1' }}</p> <!-- Output: "false" -->
1166<p>{{ 1 | isNotEqualTo: 2 }}</p> <!-- Output: "true" -->
1167<p>{{ 2 | isNotEqualTo: 1 }}</p> <!-- Output: "true" -->
1168```
1169
1170### isIdenticalTo
1171
1172**Usage:** `number | isIdenticalTo: otherNumber`
1173
1174```html
1175<p>{{ 1 | isIdenticalTo: 1 }}</p> <!-- Output: "true" -->
1176<p>{{ 1 | isIdenticalTo: '1' }}</p> <!-- Output: "false" -->
1177<p>{{ 1 | isIdenticalTo: 2 }}</p> <!-- Output: "false" -->
1178<p>{{ 2 | isIdenticalTo: 1 }}</p> <!-- Output: "false" -->
1179```
1180
1181### isNotIdenticalTo
1182
1183**Usage:** `number | isNotIdenticalTo: otherNumber`
1184
1185```html
1186<p>{{ 1 | isNotIdenticalTo: 1 }}</p> <!-- Output: "false" -->
1187<p>{{ 1 | isNotIdenticalTo: '1' }}</p> <!-- Output: "true" -->
1188<p>{{ 1 | isNotIdenticalTo: 2 }}</p> <!-- Output: "true" -->
1189<p>{{ 2 | isNotIdenticalTo: 1 }}</p> <!-- Output: "true" -->
1190```
1191
1192## Contributing
1193
1194* Before adding any new feature or a fix make sure to open an issue first!
1195
1196Make sure you have `angular-cli` & `karma` installed globally.
1197
1198```bash
1199$ npm install -g angular-cli karma
1200```
1201
1202Clone the project, and install dependencies.
1203
1204```bash
1205$ git clone https://github.com/danrevah/ngx-pipes.git
1206$ npm install
1207```
1208
1209Create a new branch
1210
1211```bash
1212$ git checkout -b feat/someFeature
1213```
1214
1215Add tests & make sure everything is running properly
1216```bash
1217$ npm test
1218```
1219
1220Commit & push, and make a pull request!