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 - [a-or-an](#a-or-an)
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 - [make-plural-string](#make-plural-string)
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### a-or-an
165
166Prefixes input string with "a" or "an".
167
168**Usage:** `string | a-or-an`
169
170```html
171<span>This is a picture of {{imageDescription | a-or-an}}</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```
230
231### trim
232
233Strips characters from the beginning and end of a string (default character is space).
234
235**Usage:** `string | trim: [characters|optional]`
236
237```html
238<p>{{' foo ' | trim }}</p> <!-- Output: "foo" -->
239<p>{{'foobarfoo' | trim: 'foo' }}</p> <!-- Output: "bar" -->
240```
241
242### ltrim
243
244Strips characters from the beginning of a string (default character is space).
245
246**Usage:** `string | ltrim: [characters|optional]`
247
248```html
249<p>{{' foo ' | ltrim }}</p> <!-- Output: "foo " -->
250<p>{{'foobarfoo' | ltrim: 'foo' }}</p> <!-- Output: "barfoo" -->
251```
252
253### rtrim
254
255Strips characters from the end of a string (default character is space).
256
257**Usage:** `string | rtrim: [characters|optional]`
258
259```html
260<p>{{' foo ' | rtrim }}</p> <!-- Output: " foo" -->
261<p>{{'foobarfoo' | rtrim: 'foo' }}</p> <!-- Output: "foobar" -->
262```
263
264### reverse
265
266Reverses a string
267
268**Usage:** `string | reverse`
269
270```html
271<p>{{'foo bar' | reverse }}</p> <!-- Output: "rab oof" -->
272```
273
274### slugify
275
276Slugify a string (lower case and add dash between words).
277
278**Usage:** `string | slugify`
279
280```html
281<p>{{'Foo Bar' | slugify }}</p> <!-- Output: "foo-bar" -->
282<p>{{'Some Text To Slugify' | slugify }}</p> <!-- Output: "some-text-to-slugify" -->
283```
284
285### camelize
286
287Camelize a string replaces dashes and underscores and converts to camelCase string.
288
289**Usage:** `string | camelize`
290
291```html
292<p>{{'foo_bar' | camelize }}</p> <!-- Output: "fooBar" -->
293<p>{{'some_dashed-with-underscore' | camelize }}</p> <!-- Output: "someDashedWithUnderscore" -->
294<p>{{'-dash_first-' | camelize }}</p> <!-- Output: "dashFirst" -->
295```
296
297### latinise
298
299Removes accents from Latin characters.
300
301**Usage:** `string | latinise`
302
303```html
304<p>{{'Féé' | latinise }}</p> <!-- Output: "Fee" -->
305<p>{{'foo' | latinise }}</p> <!-- Output: "foo" -->
306```
307
308### lines
309
310Converts a string with new lines into an array of each line.
311
312**Usage:** `string | lines`
313
314```html
315<p>{{'Some\nSentence with\r\nNew line' | lines }}</p> <!-- Output: "['Some', 'Sentence with', 'New line']" -->
316```
317
318### underscore
319
320Converts camelCase string to underscore.
321
322**Usage:** `string | underscore`
323
324```html
325<p>{{'angularIsAwesome' | underscore }}</p> <!-- Output: "angular_is_awesome" -->
326<p>{{'FooBar' | underscore }}</p> <!-- Output: "foo_bar" -->
327```
328
329### test
330
331Tests if a string matches a pattern.
332
333**Usage:** `string | test: {RegExp}: {Flags}`
334
335```html
336<p>{{'foo 42' | test: '[\\d]+$': 'g' }}</p> <!-- Output: true -->
337<p>{{'42 foo' | test: '[\\d]+$': 'g' }}</p> <!-- Output: false -->
338<p>{{'FOO' | test: '^foo': 'i' }}</p> <!-- Output: true -->
339```
340
341### match
342
343Returns array of matched elements in string.
344
345**Usage:** `string | match: {RegExp}: {Flags}`
346
347```html
348<p>{{'foo 42' | match: '[\\d]+$': 'g' }}</p> <!-- Output: '42' -->
349<p>{{'42 foo' | match: '[\\d]+$': 'g' }}</p> <!-- Output: null -->
350<p>{{'FOO' | match: '^foo': 'i' }}</p> <!-- Output: 'FOO' -->
351```
352
353### lpad
354
355Left pad a string to a given length using a given pad character (default is a space)
356
357
358**Usage:** `string | lpad: length: [padCharacter:string|optional]`
359
360```html
361<p>{{'foo' | lpad: 5}}</p> <!-- Output: " foo" -->
362<!-- Cast a number to string in order to left pad it with zeros -->
363<p>{{String(3) | lpad: 5: '0'}}</p> <!-- Output: "00003" -->
364```
365
366### rpad
367
368Right pad a string to a given length using a given pad character (default is a space)
369
370
371**Usage:** `string | rpad: length: [padCharacter:string|optional]`
372
373```html
374<p>{{'Foo' | rpad: 5: '#'}}</p> <!-- Output: "Foo##" -->
375```
376
377### make-plural-string
378
379Make a singular string plural. Optional `quantity` argument specifies how many of the singular string there are.
380
381**Usage:** `string | make-plural-string: [quantity:string|optional]`
382
383```html
384<span>{{'Painting' | make-plural-string}}</span> <!-- Output: "Paintings" -->
385<span>{{'Painting' | make-plural-string: 1}}</span> <!-- Output: "Painting" -->
386<span>{{'One Painting' | make-plural-string: 1}}</span> <!-- Output: "One Painting" -->
387<span>{{'Painting' | make-plural-string: 4}}</span> <!-- Output: "Paintings" -->
388<span>{{'Four Painting' | make-plural-string: 4}}</span> <!-- Output: "Four Paintings" -->
389```
390
391
392### wrap
393
394Wrap a string between a prefix and a suffix
395
396
397**Usage:** `string | wrap: prefix: suffix`
398
399```html
400<p>{{'Foo' | wrap: 'nice prefix ': ' and awesome suffix!'}}</p> <!-- Output: "nice prefix Foo and awesome suffix!" -->
401```
402
403## Array
404
405### diff
406
407Returns array of diff between arrays
408
409**Usage:** `array | diff: [ARRAY]: [ARRAY]: ... : [ARRAY]`
410
411```typescript
412this.items = [1, 2, 3, 4];
413```
414
415```html
416<li *ngFor="let item of items | diff: [1, 2]"> <!-- Array: [3, 4] -->
417```
418
419### flatten
420
421Flattens nested array, passing shallow will mean it will only be flattened a single level
422
423**Usage:** `array | flatten: [shallow|optional]`
424
425```typescript
426this.items = [1,2,3,[4,5,6,[7,8,9],[10,11,12,13,[14],[15],[16, [17]]]]];
427```
428
429```html
430<li *ngFor="let item of items | flatten">
431<!-- Array: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17] -->
432```
433
434### initial
435
436Slicing off the end of the array by n elements
437
438**Usage:** `array | initial: n`
439
440```typescript
441this.items = [first, second, third];
442```
443
444```html
445<li *ngFor="let item of items | initial: 1"> <!-- Array: [first, second] -->
446```
447
448### tail
449
450Slicing off the start of the array by n elements
451
452**Usage:** `array | tail: n`
453
454```typescript
455this.items = [first, second, third];
456```
457
458```html
459<li *ngFor="let item of items | tail: 1"> <!-- Array: [second, third] -->
460```
461
462### intersection
463
464Returns the intersections of an arrays
465
466**Usage:** `array | intersection: [ARRAY]: [ARRAY]: ... : [ARRAY]`
467
468```typescript
469this.items = [1, 2, 3, 4, 5];
470```
471
472```html
473<li *ngFor="let item of items | intersection: [1, 2, 3]: [3, 6]"> <!-- Array: [3] -->
474```
475
476### range
477
478Returns an array with range of numbers
479
480**Usage:** `range: [start: number, default = '1']: [count: number]: [step: number | optional, default = '1']`
481
482```typescript
483this.items = this.rangePipe.transform(1, 5); // Returns: [1, 2, 3, 4, 5]
484```
485
486```html
487<li *ngFor="let item of items"> <!-- Array: [1, 2, 3, 4, 5] -->
488```
489
490### reverse
491
492Reverses an array
493
494**Usage:** `array | reverse`
495
496```typescript
497this.items = [1, 2, 3];
498```
499
500```html
501<li *ngFor="let item of items | reverse"> <!-- Array: [3, 2, 1] -->
502```
503
504### truthify
505
506Removes un-truthy values from array
507
508**Usage:** `array | truthify`
509
510```typescript
511this.items = [null, 1, false, undefined, 2, 0, 3, NaN, 4, ''];
512```
513
514```html
515<li *ngFor="let item of items | truthify"> <!-- Array: [1, 2, 3, 4] -->
516```
517
518### union
519
520Combine two arrays
521
522**Usage:** `array | union: [ARRAY]`
523
524```typescript
525this.items = [1, 2, 3];
526```
527
528```html
529<li *ngFor="let item of items | union: [[4]]"> <!-- Array: [1, 2, 3, 4] -->
530```
531
532### unique
533
534Removes duplicates from array
535
536**Usage:** `array | unique: 'Property (Optional)'`
537
538```typescript
539this.items = [1, 2, 3, 1, 2, 3];
540```
541
542```html
543<li *ngFor="let item of items | unique"> <!-- Array: [1, 2, 3] -->
544```
545
546### without
547
548Returns array without specific elements
549
550**Usage:** `array | without: [ARRAY]`
551
552```typescript
553this.items = [1, 2, 3, 1, 2, 3];
554```
555
556```html
557<li *ngFor="let item of items | without: [1,3]"> <!-- Array: [2, 2] -->
558```
559
560### pluck
561
562Returns array of properties values
563
564**Usage:** `array | pluck: propertyName`
565
566```typescript
567this.items = [
568 {
569 a: 1,
570 b: {
571 c: 4
572 }
573 },
574 {
575 a: 2,
576 b: {
577 c: 5
578 }
579 },
580 {
581 a: 3,
582 b: {
583 c: 6
584 }
585 },
586];
587```
588
589```html
590<li *ngFor="let item of items | pluck: 'a'"> <!-- Array: [1, 2, 3] -->
591<li *ngFor="let item of items | pluck: 'b.c'"> <!-- Array: [4, 5, 6] -->
592```
593
594### shuffle
595
596Returns randomly shuffled array
597
598**Usage:** `array | shuffle`
599
600```typescript
601this.items = [1, 2, 3, 4, 5, 6];
602```
603
604```html
605<li *ngFor="let item of items | shuffle"> <!-- Array: [4, 1, 6, 2, 5, 3] -->
606```
607
608### every
609
610Returns true if every elements of the array fits the predicate otherwise false
611
612**Usage:** `array | every: predicate`
613
614```typescript
615this.itemsOne = [1, 1, 1];
616this.itemsTwo = [1, 1, 2];
617this.itemsThree = [2, 2, 2];
618this.predicate = (value: any, index: number, array: any[]): boolean => {
619 return value === 1;
620};
621```
622
623```html
624<p>{{ itemsOne | every: predicate }}</p> <!-- Output: "true" -->
625<p>{{ itemsTwo | every: predicate }}</p> <!-- Output: "false" -->
626<p>{{ itemsThree | every: predicate }}</p> <!-- Output: "false" -->
627```
628
629### some
630
631Returns true if some elements of the array fits the predicate otherwise false
632
633**Usage:** `array | some: predicate`
634
635```typescript
636this.itemsOne = [1, 1, 1];
637this.itemsTwo = [1, 1, 2];
638this.itemsThree = [2, 2, 2];
639this.predicate = (value: any, index: number, array: any[]): boolean => {
640 return value === 1;
641};
642```
643
644```html
645<p>{{ itemsOne | some: predicate }}</p> <!-- Output: "true" -->
646<p>{{ itemsTwo | some: predicate }}</p> <!-- Output: "true" -->
647<p>{{ itemsThree | some: predicate }}</p> <!-- Output: "false" -->
648```
649
650### sample
651
652Returns sample items randomly from array
653
654**Usage:** `array | sample: [amount | default = 1]`
655
656```html
657<p>{{ [1, 2, 3, 4] | sample }}</p> <!-- Output: "[2]" -->
658<p>{{ [1, 2, 3, 4] | sample: 2 }}</p> <!-- Output: "[4, 3]" -->
659```
660
661### groupBy
662
663Returns object of grouped by items by discriminator, and supports nested properties.
664
665**Usage:** `array | groupBy: [string[] | string | Function]: [delimiter: string | optional, default = '|']`
666
667```typescript
668this.arrayObject = [
669 {id: 1, elm: 'foo', value: 0},
670 {id: 2, elm: 'bar', value: 1},
671 {id: 3, elm: 'foo', value: 2},
672 {id: 4, elm: 'foo', value: 2}
673];
674
675this.arrayNestedObject = [
676 {id: 1, prop: { deep: 'foo' }},
677 {id: 2, prop: { deep: 'bar' }},
678 {id: 3, prop: { deep: 'foo' }},
679 {id: 4, prop: { deep: 'bar' }}
680];
681```
682
683```html
684<p>{{ arrayObject | groupBy: 'elm' }}</p>
685<!-- 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}]}" -->
686
687<p>{{ arrayObject | groupBy: ['elm', 'value'] }}</p>
688<!-- 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}]}" -->
689
690<p>{{ arrayObject | groupBy: ['elm', 'value']: '_' }}</p>
691<!-- 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}]}" -->
692
693<p>{{ arrayNestedObject | groupBy: 'prop.deep' }}</p>
694<!-- Output:{foo: [{id: 1, prop: {deep: foo}}, {id: 3, prop: {deep: foo}}], bar: [{id: 2, prop: {deep: bar}}, {id: 4, prop: {deep: bar}}]}" -->
695```
696
697## groupByImpure
698
699Identical to groupBy pipe, the only difference is that it's an impure pipe.
700
701Impure pipes: https://angular.io/guide/pipes#impure-pipes
702
703### filterBy
704
705Returns object array of grouped by items by discriminator
706
707**Usage:** `array | filterBy: [prop, nested.prop, ...]: search: [strict | optional]`
708
709```typescript
710this.users = [
711 {id: 1, first_name: 'John', last_name: 'Doe', work: { company: 'Foo Tech' }},
712 {id: 2, first_name: 'Jane', last_name: 'West', work: { company: 'AAA Solutions' }},
713 {id: 3, first_name: 'Bruce', last_name: 'John', work: { company: 'Bar Tech' }},
714 {id: 4, first_name: 'William', last_name: 'Cent', work: { company: 'Foo Tech' }, arr: [{name: 'foo'}]}
715];
716```
717
718```html
719<!-- Returns users with `id` of 1 -->
720<p>{{ users | filterBy: ['id']: 1 }}</p>
721<!-- Output: "[{id: 1, first_name: 'John', last_name: 'Doe', work: { company: 'Foo Tech', previous_company: '' }}]" -->
722
723<!-- filterBy also support nested properties -->
724<p>{{ users | filterBy: ['work.company']: 'Bar Tech' }}</p>
725<!-- Output: "[{ "id": 3, "first_name": "Bruce", "last_name": "John", "work": { "company": "Bar Tech", "previous_company": "" } }]" -->
726
727<!-- filterBy also support nested properties inside of an array -->
728<p>{{ users | filterBy: ['arr.name']: 'foo' }}</p>
729<!-- Output: "[{id: 4, first_name: 'William', last_name: 'Cent', work: { company: 'Foo Tech' }, arr: [{name: 'foo'}]}]" -->
730
731<!-- Return users whose first name or last name is 'John'. -->
732<p>{{ users | filterBy: ['first_name', 'last_name']: 'John' }}</p>
733<!-- Output: "[{id: 1, first_name: 'John', last_name: 'Doe', work: { company: 'Foo Tech', previous_company: '' }}]" -->
734
735<!-- Return users whose first name or last name is 'John' or 'Cent'. -->
736<p>{{ users | filterBy: ['first_name', 'last_name']: ['John', 'Cent'] }}</p>
737<!-- 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'}]}]" -->
738```
739
740## filterByImpure
741
742Identical to filterBy pipe, the only difference is that it's an impure pipe.
743
744Impure pipes: https://angular.io/guide/pipes#impure-pipes
745
746### orderBy
747
748Returns ordered array by configuration
749
750**Usage:** `array | orderBy: [prop, nested.prop, array of props, ...]`
751
752```typescript
753const numbers = [2, 1, 3];
754
755const obj = [
756 {id: 4, name: 'Dave', amount: 2},
757 {id: 2, name: 'Michael', amount: 2},
758 {id: 3, name: 'Dan', amount: 1},
759 {id: 1, name: 'John', amount: 1}
760];
761
762const deepObj = [
763 {id: 1, name: 'John', amount: 1337, deep: {prop: 4}},
764 {id: 2, name: 'Michael', amount: 42, deep: {prop: 2}},
765 {id: 3, name: 'Dan', amount: 1, deep: {prop: 1}},
766 {id: 4, name: 'Dave', amount: 2, deep: {prop: 3}}
767];
768```
769
770```html
771<!-- Returns array ordered by value -->
772<p>{{ numbers | orderBy }}</p> <!-- Output: [1, 2, 3] -->
773<p>{{ numbers | orderBy: '-' }}</p> <!-- Output: [3, 2, 1] -->
774
775<!-- Returns array ordered by value of property -->
776<p>{{ deepObj | orderBy: 'amount' }}</p>
777<!-- Output: [{id: 3, ...}, {id: 4, ...}, {id: 2, ...}, {id: 1, ...}] -->
778<p>{{ deepObj | orderBy: '-amount' }}</p>
779<!-- Output: [{id: 1, ...}, {id: 2, ...}, {id: 4, ...}, {id: 3, ...}] -->
780
781<!-- Returns array ordered by value of deep property -->
782<p>{{ deepObj | orderBy: 'deep.prop' }}</p>
783<!-- Output: [{id: 3, ...}, {id: 2, ...}, {id: 4, ...}, {id: 1, ...}] -->
784<p>{{ deepObj | orderBy: '-deep.prop' }}</p>
785<!-- Output: [{id: 1, ...}, {id: 4, ...}, {id: 2, ...}, {id: 3, ...}] -->
786
787<!-- Returns array ordered by mutliple properties -->
788<p>{{ obj | orderBy: ['amount', 'id'] }}</p>
789<!-- Output: [{id: 1, ...}, {id: 3, ...}, {id: 2, ...}, {id: 4, ...}] -->
790```
791
792## orderByImpure
793
794Identical to orderBy pipe, the only difference is that it's an impure pipe.
795
796Impure pipes: https://angular.io/guide/pipes#impure-pipes
797
798## Object
799
800### keys
801
802Returns array of object keys
803
804**Usage:** `object | keys`
805
806```html
807<p>{{ {foo: 1, bar: 2} | keys }}</p> <!-- Output: "['foo', 'bar']" -->
808```
809
810### values
811
812Returns array of object values
813
814**Usage:** `object | values`
815
816```html
817<p>{{ {foo: 1, bar: 2} | values }}</p> <!-- Output: "[1, 2]" -->
818```
819
820### pairs
821
822Returns array of an object key value pairs
823
824**Usage:** `object | pairs`
825
826```html
827<p>{{ {foo: 1, bar: 2} | pairs }}</p> <!-- Output: "[['foo', 1], ['bar', 2]]" -->
828<p>{{ {foo: [1, 2], bar: [3, 4]} | pairs }}</p> <!-- Output: "[['foo', [1, 2]], ['bar', [3, 4]]]" -->
829```
830
831### pick
832
833Returns object with picked keys from object
834
835**Usage:** `object | pick: [key | string]]`
836
837```html
838<p>{{ {foo: 1, bar: 2} | pick: 'foo' }}</p> <!-- Output: "{foo: 1}" -->
839<p>{{ {foo: 1, bar: 2} | pick: 'foo': 'bar' }}</p> <!-- Output: "{foo: 1, bar: 2}" -->
840```
841
842### omit
843
844Returns object after omitting keys from object (opposite of pick)
845
846**Usage:** `object | omit: [key | string]]`
847
848```html
849<p>{{ {foo: 1, bar: 2} | omit: 'foo' }}</p> <!-- Output: "{bar: 2}" -->
850<p>{{ {foo: 1, bar: 2} | omit: 'foo': 'bar' }}</p> <!-- Output: "{}" -->
851```
852
853### invert
854
855Returns object with inverted keys and values. in case of equal values, subsequent values overwrite property assignments of previous values.
856
857**Usage:** `object | invert`
858
859```html
860<p>{{ {foo: 1, bar: 2} | invert }}</p> <!-- Output: "{1: 'foo', 2: 'bar'}" -->
861```
862
863### invertBy
864
865Returns object with inverted keys and values. in case of equal values, will add to an array.
866
867**Usage:** `object | invertBy: [Function | optional]`
868
869```typescript
870this.cb = (value): string => {
871 return `name_${value}`;
872};
873```
874
875```html
876<p>{{ {foo: 1, bar: 2} | invertBy }}</p> <!-- Output: "{1: ['foo'], 2: ['bar']}" -->
877<p>{{ {foo: 1, bar: 2} | invertBy: cb }}</p> <!-- Output: "{name_1: ['foo'], name_2: ['bar']}" -->
878<p>{{ {a: 1, b: 2, c: 1, d: 2} | invertBy }}</p> <!-- Output: "{1: ['a', 'c'], 2: ['b', 'd']}" -->
879```
880
881### diffObj
882
883Returns a diff object of two objects
884
885**Usage:** `object | diffObj: Object`
886
887```html
888<p>{{ {a: 1} | diffObj: {a: 1} }}</p> <!-- Output: "{}" -->
889<p>{{ {a: 1} | diffObj: {a: 2} }}</p> <!-- Output: "{a: 1}" -->
890<p>{{ {a: 1, b: 2} | diffObj: {a: 1, b: 1} }}</p> <!-- Output: "{b: 2}" -->
891<p>{{ {a: 1, b: 2, c: {d: 3} } | diffObj: {a: 1, b: 1, c: {d: 1} } }}</p> <!-- Output: "{b: 2, c: {d: 3}}" -->
892```
893
894## Math
895
896### min
897
898Returns the minimum of a given array
899
900**Usage:** `array | min`
901
902```html
903<p>{{ [1, 2, 3, 1, 2, 3] | min }}</p> <!-- Output: "1" -->
904```
905
906### max
907
908Returns the maximum of a given array
909
910**Usage:** `array | max`
911
912```html
913<p>{{ [1, 2, 3, 1, 2, 3] | max }}</p> <!-- Output: "3" -->
914```
915
916### sum
917
918Returns the sum of a given array
919
920**Usage:** `array | sum`
921
922```html
923<p>{{ [1, 2, 3, 4] | sum }}</p> <!-- Output: "10" -->
924```
925
926### percentage
927
928Returns percentage between numbers
929
930**Usage:** `number | percentage: [total | default = 100]: [floor | default = false]`
931
932```html
933<p>{{ 5 | percentage }}</p> <!-- Output: "5" -->
934<p>{{ 5 | percentage: 160 }}</p> <!-- Output: "3.125" -->
935<p>{{ 5 | percentage: 160: true }}</p> <!-- Output: "3" -->
936```
937
938### ceil
939
940Returns ceil of a number by precision
941
942**Usage:** `number | ceil: [precision | default = 0]`
943
944```html
945<p>{{ 42.123 | ceil }}</p> <!-- Output: "43" -->
946<p>{{ 42.123 | ceil: 2 }}</p> <!-- Output: "42.13" -->
947```
948
949### floor
950
951Returns floor of a number by precision
952
953**Usage:** `number | floor: [precision | default = 0]`
954
955```html
956<p>{{ 42.123 | floor }}</p> <!-- Output: "42" -->
957<p>{{ 42.123 | floor: 2 }}</p> <!-- Output: "42.12" -->
958```
959
960### round
961
962Returns round of a number by precision
963
964**Usage:** `number | round: [precision | default = 0]`
965
966```html
967<p>{{ 42.4 | round }}</p> <!-- Output: "42" -->
968<p>{{ 42.5 | round }}</p> <!-- Output: "43" -->
969<p>{{ 42.123 | round: 2 }}</p> <!-- Output: "42.12" -->
970```
971
972### sqrt
973
974Returns the square root of a number
975
976**Usage:** `number | sqrt`
977
978```html
979<p>{{ 9 | sqrt }}</p> <!-- Output: "3" -->
980```
981
982### pow
983
984Returns the power of a number
985
986**Usage:** `number | pow: [power | default = 2]`
987
988```html
989<p>{{ 3 | pow }}</p> <!-- Output: "9" -->
990<p>{{ 3 | pow: 3 }}</p> <!-- Output: "27" -->
991```
992
993### degrees
994
995Returns the degrees of a number in radians
996
997**Usage:** `number | degrees`
998
999```html
1000<p>{{ 3.141592653589793 | degrees }}</p> <!-- Output: "180" -->
1001```
1002
1003### radians
1004
1005Returns the radians of a number in degrees
1006
1007**Usage:** `number | radians`
1008
1009```html
1010<p>{{ 180 | radians }}</p> <!-- Output: "3.141592653589793" -->
1011```
1012
1013### bytes
1014
1015Returns bytes with a unit symbol
1016
1017**Usage:** `number | bytes: [precision]`
1018
1019```html
1020<p>{{ 10 | bytes }}</p> <!-- Output: "10 B" -->
1021<p>{{ 1048576 | bytes }}</p> <!-- Output: "1 KB" -->
1022<p>{{ 1073741824 | bytes }}</p> <!-- Output: "1 MB" -->
1023<p>{{ 1.0995116e12 | bytes }}</p> <!-- Output: "1 GB" -->
1024```
1025
1026## Boolean
1027
1028### isNull
1029
1030**Usage:** `any | isNull`
1031
1032```html
1033<p>{{ null | isNull }}</p> <!-- Output: "true" -->
1034<p>{{ 1 | isNull }}</p> <!-- Output: "false" -->
1035```
1036
1037### isDefined
1038
1039**Usage:** `any | isDefined`
1040
1041```html
1042<p>{{ 1 | isDefined }}</p> <!-- Output: "true" -->
1043<p>{{ undefined | isDefined }}</p> <!-- Output: "false" -->
1044```
1045
1046### isUndefined
1047
1048**Usage:** `any | isUndefined`
1049
1050```html
1051<p>{{ 1 | isUndefined }}</p> <!-- Output: "false" -->
1052<p>{{ undefined | isUndefined }}</p> <!-- Output: "true" -->
1053```
1054
1055
1056### isString
1057
1058**Usage:** `any | isString`
1059
1060```html
1061<p>{{ 1 | isString }}</p> <!-- Output: "false" -->
1062<p>{{ '' | isString }}</p> <!-- Output: "true" -->
1063```
1064
1065### isNumber
1066
1067**Usage:** `any | isNumber`
1068
1069```typescript
1070this.func = () => {};
1071this.num = 1;
1072```
1073
1074```html
1075<p>{{ num | isNumber }}</p> <!-- Output: "true" -->
1076<p>{{ func | isNumber }}</p> <!-- Output: "false" -->
1077```
1078
1079### isArray
1080
1081**Usage:** `any | isArray`
1082
1083```typescript
1084this.arr = [1, 2];
1085this.num = 1;
1086```
1087
1088```html
1089<p>{{ num | isArray }}</p> <!-- Output: "false" -->
1090<p>{{ arr | isArray }}</p> <!-- Output: "true" -->
1091```
1092
1093### isObject
1094
1095**Usage:** `any | isObject`
1096
1097```typescript
1098this.obj = {a: 1, b: 2};
1099this.num = 1;
1100```
1101
1102```html
1103<p>{{ num | isObject }}</p> <!-- Output: "false" -->
1104<p>{{ obj | isObject }}</p> <!-- Output: "true" -->
1105```
1106
1107### isGreaterThan
1108
1109**Usage:** `number | isGreaterThan: otherNumber`
1110
1111```html
1112<p>{{ 1 | isGreaterThan: 1 }}</p> <!-- Output: "false" -->
1113<p>{{ 1 | isGreaterThan: 2 }}</p> <!-- Output: "false" -->
1114<p>{{ 2 | isGreaterThan: 1 }}</p> <!-- Output: "true" -->
1115```
1116
1117### isGreaterEqualThan
1118
1119**Usage:** `number | isGreaterEqualThan: otherNumber`
1120
1121```html
1122<p>{{ 1 | isGreaterEqualThan: 1 }}</p> <!-- Output: "true" -->
1123<p>{{ 1 | isGreaterEqualThan: 2 }}</p> <!-- Output: "false" -->
1124<p>{{ 2 | isGreaterEqualThan: 1 }}</p> <!-- Output: "true" -->
1125```
1126
1127### isLessThan
1128
1129**Usage:** `number | isLessThan: otherNumber`
1130
1131```html
1132<p>{{ 1 | isLessThan: 1 }}</p> <!-- Output: "false" -->
1133<p>{{ 1 | isLessThan: 2 }}</p> <!-- Output: "true" -->
1134<p>{{ 2 | isLessThan: 1 }}</p> <!-- Output: "false" -->
1135```
1136
1137### isLessEqualThan
1138
1139**Usage:** `number | isLessEqualThan: otherNumber`
1140
1141```html
1142<p>{{ 1 | isLessEqualThan: 1 }}</p> <!-- Output: "true" -->
1143<p>{{ 1 | isLessEqualThan: 2 }}</p> <!-- Output: "true" -->
1144<p>{{ 2 | isLessEqualThan: 1 }}</p> <!-- Output: "false" -->
1145```
1146
1147### isEqualTo
1148
1149**Usage:** `number | isEqualTo: otherNumber`
1150
1151```html
1152<p>{{ 1 | isEqualTo: 1 }}</p> <!-- Output: "true" -->
1153<p>{{ 1 | isEqualTo: '1' }}</p> <!-- Output: "true" -->
1154<p>{{ 1 | isEqualTo: 2 }}</p> <!-- Output: "false" -->
1155<p>{{ 2 | isEqualTo: 1 }}</p> <!-- Output: "false" -->
1156```
1157
1158### isNotEqualTo
1159
1160**Usage:** `number | isNotEqualTo: otherNumber`
1161
1162```html
1163<p>{{ 1 | isNotEqualTo: 1 }}</p> <!-- Output: "false" -->
1164<p>{{ 1 | isNotEqualTo: '1' }}</p> <!-- Output: "false" -->
1165<p>{{ 1 | isNotEqualTo: 2 }}</p> <!-- Output: "true" -->
1166<p>{{ 2 | isNotEqualTo: 1 }}</p> <!-- Output: "true" -->
1167```
1168
1169### isIdenticalTo
1170
1171**Usage:** `number | isIdenticalTo: otherNumber`
1172
1173```html
1174<p>{{ 1 | isIdenticalTo: 1 }}</p> <!-- Output: "true" -->
1175<p>{{ 1 | isIdenticalTo: '1' }}</p> <!-- Output: "false" -->
1176<p>{{ 1 | isIdenticalTo: 2 }}</p> <!-- Output: "false" -->
1177<p>{{ 2 | isIdenticalTo: 1 }}</p> <!-- Output: "false" -->
1178```
1179
1180### isNotIdenticalTo
1181
1182**Usage:** `number | isNotIdenticalTo: otherNumber`
1183
1184```html
1185<p>{{ 1 | isNotIdenticalTo: 1 }}</p> <!-- Output: "false" -->
1186<p>{{ 1 | isNotIdenticalTo: '1' }}</p> <!-- Output: "true" -->
1187<p>{{ 1 | isNotIdenticalTo: 2 }}</p> <!-- Output: "true" -->
1188<p>{{ 2 | isNotIdenticalTo: 1 }}</p> <!-- Output: "true" -->
1189```
1190
1191## Contributing
1192
1193* Before adding any new feature or a fix make sure to open an issue first!
1194
1195Make sure you have `angular-cli` & `karma` installed globally.
1196
1197```bash
1198$ npm install -g angular-cli karma
1199```
1200
1201Clone the project, and install dependencies.
1202
1203```bash
1204$ git clone https://github.com/danrevah/ngx-pipes.git
1205$ npm install
1206```
1207
1208Create a new branch
1209
1210```bash
1211$ git checkout -b feat/someFeature
1212```
1213
1214Add tests & make sure everything is running properly
1215```bash
1216$ npm test
1217```
1218
1219Commit & push, and make a pull request!