UNPKG

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