1 | # Angular Pipes
|
2 | [![npm](https://img.shields.io/npm/v/ngx-pipes.svg?style=flat-square)](https://www.npmjs.com/package/ngx-pipes) [![Travis](https://img.shields.io/travis/danrevah/ngx-pipes.svg?style=flat-square)](https://travis-ci.org/danrevah/ngx-pipes) [![Coveralls](https://img.shields.io/coveralls/danrevah/ngx-pipes.svg?style=flat-square)](https://coveralls.io/github/danrevah/ngx-pipes?branch=master) [![npm](https://img.shields.io/npm/dt/ng2-pipes.svg?style=flat-square)](https://www.npmjs.com/package/ng2-pipes) [![license](https://img.shields.io/github/license/mashape/apistatus.svg?style=flat-square)](https://github.com/danrevah/ng-pipes/blob/master/LICENSE.md)
|
3 |
|
4 | > Useful pipes for Angular 2+ with no external dependencies!
|
5 |
|
6 | ## Table of contents
|
7 |
|
8 | - [Installation](#installation)
|
9 | - [Contributing](#contributing)
|
10 | - [String](#string)
|
11 | - [repeat](#repeat)
|
12 | - [scan](#scan)
|
13 | - [shorten](#shorten)
|
14 | - [stripTags](#striptags)
|
15 | - [ucfirst](#ucfirst)
|
16 | - [ucwords](#ucwords)
|
17 | - [trim](#trim)
|
18 | - [ltrim](#ltrim)
|
19 | - [rtrim](#rtrim)
|
20 | - [reverse](#reverse)
|
21 | - [slugify](#slugify)
|
22 | - [camelize](#camelize)
|
23 | - [latinise](#latinise)
|
24 | - [lines](#lines)
|
25 | - [underscore](#underscore)
|
26 | - [test](#test)
|
27 | - [match](#match)
|
28 | - [lpad](#lpad)
|
29 | - [rpad](#rpad)
|
30 | - [Array](#Array)
|
31 | - [diff](#diff)
|
32 | - [flatten](#flatten)
|
33 | - [initial](#initial)
|
34 | - [intersection](#intersection)
|
35 | - [reverse](#reverse)
|
36 | - [tail](#tail)
|
37 | - [truthify](#truthify)
|
38 | - [union](#union)
|
39 | - [unique](#unique)
|
40 | - [without](#without)
|
41 | - [pluck](#pluck)
|
42 | - [shuffle](#shuffle)
|
43 | - [every](#every)
|
44 | - [some](#some)
|
45 | - [sample](#sample)
|
46 | - [groupBy](#groupby)
|
47 | - [Object](#object)
|
48 | - [keys](#keys)
|
49 | - [values](#values)
|
50 | - [pairs](#pairs)
|
51 | - [pick](#pick)
|
52 | - [omit](#omit)
|
53 | - [invert](#invert)
|
54 | - [invertBy](#invertby)
|
55 | - [Math](#math)
|
56 | - [min](#min)
|
57 | - [max](#max)
|
58 | - [percentage](#percentage)
|
59 | - [ceil](#ceil)
|
60 | - [floor](#floor)
|
61 | - [round](#round)
|
62 | - [sqrt](#sqrt)
|
63 | - [pow](#pow)
|
64 | - [degrees](#degrees)
|
65 | - [radians](#radians)
|
66 | - [bytes](#bytes)
|
67 | - [Boolean](#boolean)
|
68 | - [isNull](#isnull)
|
69 | - [isDefined](#isdefined)
|
70 | - [isUndefined](#isundefined)
|
71 | - [isString](#isstring)
|
72 | - [isFunction](#isfunction)
|
73 | - [isNumber](#isnumber)
|
74 | - [isArray](#isarray)
|
75 | - [isObject](#isobject)
|
76 | - [isGreaterThan](#isgreaterthan)
|
77 | - [isGreaterEqualThan](#isgreaterequalthan)
|
78 | - [isLessThan](#islessthan)
|
79 | - [isLessEqualThan](#islessequalthan)
|
80 | - [isEqualTo](#isequalto)
|
81 | - [isNotEqualTo](#isnotequalto)
|
82 | - [isIdenticalTo](#isidenticalto)
|
83 | - [isNotIdenticalTo](#isnotidenticalto)
|
84 |
|
85 |
|
86 | ## Installation
|
87 |
|
88 | 1. Use npm to install the package
|
89 |
|
90 | ```terminal
|
91 | $ npm install ngx-pipes --save
|
92 | ```
|
93 |
|
94 | 2. 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`.
|
95 |
|
96 | ```typescript
|
97 | import {NgPipesModule} from 'ng2-pipes';
|
98 |
|
99 | @NgModule({
|
100 | // ...
|
101 | imports: [
|
102 | // ...
|
103 | NgPipesModule
|
104 | ]
|
105 | })
|
106 | ```
|
107 |
|
108 | 3. Pipes are also injectable and can be used in Components / Services / etc..
|
109 |
|
110 | ```typescript
|
111 | import {ReversePipe} from 'ng2-pipes/src/app/pipes/array/reverse';
|
112 |
|
113 | @Component({
|
114 | // ..
|
115 | providers: [ReversePipe]
|
116 | })
|
117 | export class AppComponent {
|
118 | constructor(private reversePipe: ReversePipe) {
|
119 | this.reversePipe.transform('foo'); // Returns: "oof"
|
120 | }
|
121 | // ..
|
122 | }
|
123 | ```
|
124 |
|
125 |
|
126 |
|
127 |
|
128 | ## String
|
129 |
|
130 | ### repeat
|
131 |
|
132 | Repeats a string n times
|
133 |
|
134 | API: `string | repeat: times: [separator|optional]`
|
135 |
|
136 | ```html
|
137 | <p>{{ 'example' | repeat: 3: '@' }}</p> <!-- Output: "example@example@example" -->
|
138 | ```
|
139 |
|
140 | ### scan
|
141 |
|
142 | Scans string and replace `{i}` placeholders by equivalent member of the array
|
143 |
|
144 | API: `string | scan: [ARRAY]`
|
145 |
|
146 | ```html
|
147 | <p>{{'Hey {0}, {1}' | scan: ['foo', 'bar']}}</p> <!-- Output: "Hey foo, bar" -->
|
148 | ```
|
149 |
|
150 | ### shorten
|
151 |
|
152 | Shortening a string by length and providing a custom string to denote an omission
|
153 |
|
154 |
|
155 | API: `string | shorten: length: [suffix|optional]: [wordBreak boolean|optional]`
|
156 |
|
157 | ```html
|
158 | <p>{{'Hey foo bar' | shorten: 3: '...'}}</p> <!-- Output: "Hey..." -->
|
159 | ```
|
160 |
|
161 | ### stripTags
|
162 |
|
163 | Strips a HTML tags from string and providing which tags should not be removed
|
164 |
|
165 | API: `string | stripTags: [ARRAY]`
|
166 |
|
167 | ```html
|
168 | <p>{{'<a href="">foo</a> <p class="foo">bar</p>' | stripTags }}</p> <!-- Output: "foo bar" -->
|
169 | <p>{{'<a href="">foo</a> <p class="foo">bar</p>' | stripTags: 'p'}}</p> <!-- Output: foo <p class="foo">bar</p> -->
|
170 | ```
|
171 |
|
172 | ### ucfirst
|
173 |
|
174 | Uppercase first letter of first word
|
175 |
|
176 | ```html
|
177 | <p>{{'foo bar' | ucfirst }}</p> <!-- Output: "Foo bar" -->
|
178 | ```
|
179 |
|
180 | ### ucwords
|
181 |
|
182 | Uppercase first letter every word
|
183 |
|
184 | ```html
|
185 | <p>{{'foo bar' | ucwords }}</p> <!-- Output: "Foo Bar" -->
|
186 | ```
|
187 |
|
188 | ### trim
|
189 |
|
190 | Strips characters from the beginning and end of a string (default character is space).
|
191 |
|
192 | API: `string | trim: [characters|optional]`
|
193 |
|
194 | ```html
|
195 | <p>{{' foo ' | trim }}</p> <!-- Output: "foo" -->
|
196 | <p>{{'foobarfoo' | trim: 'foo' }}</p> <!-- Output: "bar" -->
|
197 | ```
|
198 |
|
199 | ### ltrim
|
200 |
|
201 | Strips characters from the beginning of a string (default character is space).
|
202 |
|
203 | API: `string | ltrim: [characters|optional]`
|
204 |
|
205 | ```html
|
206 | <p>{{' foo ' | ltrim }}</p> <!-- Output: "foo " -->
|
207 | <p>{{'foobarfoo' | ltrim: 'foo' }}</p> <!-- Output: "barfoo" -->
|
208 | ```
|
209 |
|
210 | ### rtrim
|
211 |
|
212 | Strips characters from the end of a string (default character is space).
|
213 |
|
214 | API: `string | rtrim: [characters|optional]`
|
215 |
|
216 | ```html
|
217 | <p>{{' foo ' | rtrim }}</p> <!-- Output: " foo" -->
|
218 | <p>{{'foobarfoo' | rtrim: 'foo' }}</p> <!-- Output: "foobar" -->
|
219 | ```
|
220 |
|
221 | ### reverse
|
222 |
|
223 | Reverses a string
|
224 |
|
225 | API: `string | reverse`
|
226 |
|
227 | ```html
|
228 | <p>{{'foo bar' | reverse }}</p> <!-- Output: "rab oof" -->
|
229 | ```
|
230 |
|
231 | ### slugify
|
232 |
|
233 | Slugify a string (lower case and add dash between words).
|
234 |
|
235 | API: `string | slugify`
|
236 |
|
237 | ```html
|
238 | <p>{{'Foo Bar' | slugify }}</p> <!-- Output: "foo-bar" -->
|
239 | <p>{{'Some Text To Slugify' | slugify }}</p> <!-- Output: "some-text-to-slugify" -->
|
240 | ```
|
241 |
|
242 | ### camelize
|
243 |
|
244 | Camelize a string replaces dashes and underscores and converts to camelCase string.
|
245 |
|
246 | API: `string | camelize`
|
247 |
|
248 | ```html
|
249 | <p>{{'foo_bar' | camelize }}</p> <!-- Output: "fooBar" -->
|
250 | <p>{{'some_dashed-with-underscore' | camelize }}</p> <!-- Output: "someDashedWithUnderscore" -->
|
251 | <p>{{'-dash_first-' | camelize }}</p> <!-- Output: "dashFirst" -->
|
252 | ```
|
253 |
|
254 | ### latinise
|
255 |
|
256 | Removes accents from Latin characters.
|
257 |
|
258 | API: `string | latinise`
|
259 |
|
260 | ```html
|
261 | <p>{{'Féé' | latinise }}</p> <!-- Output: "Fee" -->
|
262 | <p>{{'foo' | latinise }}</p> <!-- Output: "foo" -->
|
263 | ```
|
264 |
|
265 | ### lines
|
266 |
|
267 | Converts a string with new lines into an array of each line.
|
268 |
|
269 | API: `string | lines`
|
270 |
|
271 | ```html
|
272 | <p>{{'Some\nSentence with\r\nNew line' | lines }}</p> <!-- Output: "['Some', 'Sentence with', 'New line']" -->
|
273 | ```
|
274 |
|
275 | ### underscore
|
276 |
|
277 | Converts camelCase string to underscore.
|
278 |
|
279 | API: `string | underscore`
|
280 |
|
281 | ```html
|
282 | <p>{{'angularIsAwesome' | underscore }}</p> <!-- Output: "angular_is_awesome" -->
|
283 | <p>{{'FooBar' | underscore }}</p> <!-- Output: "foo_bar" -->
|
284 | ```
|
285 |
|
286 | ### test
|
287 |
|
288 | Tests if a string matches a pattern.
|
289 |
|
290 | API: `string | test: {RegExp}: {Flags}`
|
291 |
|
292 | ```html
|
293 | <p>{{'foo 42' | test: '[\\d]+$': 'g' }}</p> <!-- Output: true -->
|
294 | <p>{{'42 foo' | test: '[\\d]+$': 'g' }}</p> <!-- Output: false -->
|
295 | <p>{{'FOO' | test: '^foo': 'i' }}</p> <!-- Output: true -->
|
296 | ```
|
297 |
|
298 | ### match
|
299 |
|
300 | Returns array of matched elements in string.
|
301 |
|
302 | API: `string | match: {RegExp}: {Flags}`
|
303 |
|
304 | ```html
|
305 | <p>{{'foo 42' | match: '[\\d]+$': 'g' }}</p> <!-- Output: '42' -->
|
306 | <p>{{'42 foo' | match: '[\\d]+$': 'g' }}</p> <!-- Output: null -->
|
307 | <p>{{'FOO' | match: '^foo': 'i' }}</p> <!-- Output: 'FOO' -->
|
308 | ```
|
309 |
|
310 | ### lpad
|
311 |
|
312 | Left pad a string to a given length using a given pad character (default is a space)
|
313 |
|
314 |
|
315 | API: `string | lpad: length: [padCharacter:string|optional]`
|
316 |
|
317 | ```html
|
318 | <p>{{'foo' | lpad: 5}}</p> <!-- Output: " foo" -->
|
319 | <!-- Cast a number to string in order to left pad it with zeros -->
|
320 | <p>{{String(3) | lpad: 5: '0'}}</p> <!-- Output: "00003" -->
|
321 | ```
|
322 |
|
323 | ### rpad
|
324 |
|
325 | Right pad a string to a given length using a given pad character (default is a space)
|
326 |
|
327 |
|
328 | API: `string | rpad: length: [padCharacter:string|optional]`
|
329 |
|
330 | ```html
|
331 | <p>{{'Foo' | rpad: 5: '#'}}</p> <!-- Output: "Foo##" -->
|
332 | ```
|
333 |
|
334 | ## Array
|
335 |
|
336 | ### diff
|
337 |
|
338 | Returns array of diff between arrays
|
339 |
|
340 | API: `array | diff: [ARRAY]: [ARRAY]: ... : [ARRAY]`
|
341 |
|
342 | ```typescript
|
343 | this.items = [1, 2, 3, 4];
|
344 | ```
|
345 |
|
346 | ```html
|
347 | <li *ngFor="let item of items | diff: [1, 2]"> <!-- Array: [3, 4] -->
|
348 | ```
|
349 |
|
350 | ### flatten
|
351 |
|
352 | Flattens nested array, passing shallow will mean it will only be flattened a single level
|
353 |
|
354 | API: `array | flatten: [shallow|optional]`
|
355 |
|
356 | ```typescript
|
357 | this.items = [1,2,3,[4,5,6,[7,8,9],[10,11,12,13,[14],[15],[16, [17]]]]];
|
358 | ```
|
359 |
|
360 | ```html
|
361 | <li *ngFor="let item of items | flatten">
|
362 | <!-- Array: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17] -->
|
363 | ```
|
364 |
|
365 | ### initial
|
366 |
|
367 | Slicing off the end of the array by n elements
|
368 |
|
369 | API: `array | initial: n`
|
370 |
|
371 | ```typescript
|
372 | this.items = [first, second, third];
|
373 | ```
|
374 |
|
375 | ```html
|
376 | <li *ngFor="let item of items | initial: 1"> <!-- Array: [first, second] -->
|
377 | ```
|
378 |
|
379 | ### tail
|
380 |
|
381 | Slicing off the start of the array by n elements
|
382 |
|
383 | API: `array | tail: n`
|
384 |
|
385 | ```typescript
|
386 | this.items = [first, second, third];
|
387 | ```
|
388 |
|
389 | ```html
|
390 | <li *ngFor="let item of items | tail: 1"> <!-- Array: [second, third] -->
|
391 | ```
|
392 |
|
393 | ### intersection
|
394 |
|
395 | Returns the intersections of an arrays
|
396 |
|
397 | API: `array | intersection: [ARRAY]: [ARRAY]: ... : [ARRAY]`
|
398 |
|
399 | ```typescript
|
400 | this.items = [1, 2, 3, 4, 5];
|
401 | ```
|
402 |
|
403 | ```html
|
404 | <li *ngFor="let item of items | intersection: [1, 2, 3]: [3, 6]"> <!-- Array: [3] -->
|
405 | ```
|
406 |
|
407 | ### reverse
|
408 |
|
409 | Reverses an array
|
410 |
|
411 | API: `array | reverse`
|
412 |
|
413 | ```typescript
|
414 | this.items = [1, 2, 3];
|
415 | ```
|
416 |
|
417 | ```html
|
418 | <li *ngFor="let item of items | reverse"> <!-- Array: [3, 2, 1] -->
|
419 | ```
|
420 |
|
421 | ### truthify
|
422 |
|
423 | Removes un-truthy values from array
|
424 |
|
425 | API: `array | truthify`
|
426 |
|
427 | ```typescript
|
428 | this.items = [null, 1, false, undefined, 2, 0, 3, NaN, 4, ''];
|
429 | ```
|
430 |
|
431 | ```html
|
432 | <li *ngFor="let item of items | truthify"> <!-- Array: [1, 2, 3, 4] -->
|
433 | ```
|
434 |
|
435 | ### union
|
436 |
|
437 | Removes un-truthy values from array
|
438 |
|
439 | API: `array | union: [ARRAY]`
|
440 |
|
441 | ```typescript
|
442 | this.items = [1, 2, 3];
|
443 | ```
|
444 |
|
445 | ```html
|
446 | <li *ngFor="let item of items | union: [[4]]"> <!-- Array: [1, 2, 3, 4] -->
|
447 | ```
|
448 |
|
449 | ### unique
|
450 |
|
451 | Removes duplicates from array
|
452 |
|
453 | API: `array | unique`
|
454 |
|
455 | ```typescript
|
456 | this.items = [1, 2, 3, 1, 2, 3];
|
457 | ```
|
458 |
|
459 | ```html
|
460 | <li *ngFor="let item of items | unique"> <!-- Array: [1, 2, 3] -->
|
461 | ```
|
462 |
|
463 | ### without
|
464 |
|
465 | Returns array without specific elements
|
466 |
|
467 | API: `array | without: [ARRAY]`
|
468 |
|
469 | ```typescript
|
470 | this.items = [1, 2, 3, 1, 2, 3];
|
471 | ```
|
472 |
|
473 | ```html
|
474 | <li *ngFor="let item of items | without: [1,3]"> <!-- Array: [2, 2] -->
|
475 | ```
|
476 |
|
477 | ### pluck
|
478 |
|
479 | Returns array of properties values
|
480 |
|
481 | API: `array | pluck: propertyName`
|
482 |
|
483 | ```typescript
|
484 | this.items = [
|
485 | {
|
486 | a: 1,
|
487 | b: {
|
488 | c: 4
|
489 | }
|
490 | },
|
491 | {
|
492 | a: 2,
|
493 | b: {
|
494 | c: 5
|
495 | }
|
496 | },
|
497 | {
|
498 | a: 3,
|
499 | b: {
|
500 | c: 6
|
501 | }
|
502 | },
|
503 | ];
|
504 | ```
|
505 |
|
506 | ```html
|
507 | <li *ngFor="let item of items | pluck: 'a'"> <!-- Array: [1, 2, 3] -->
|
508 | <li *ngFor="let item of items | pluck: 'b.c'"> <!-- Array: [4, 5, 6] -->
|
509 | ```
|
510 |
|
511 | ### shuffle
|
512 |
|
513 | Returns randomly shuffled array
|
514 |
|
515 | API: `array | shuffle`
|
516 |
|
517 | ```typescript
|
518 | this.items = [1, 2, 3, 4, 5, 6];
|
519 | ```
|
520 |
|
521 | ```html
|
522 | <li *ngFor="let item of items | shuffle"> <!-- Array: [4, 1, 6, 2, 5, 3] -->
|
523 | ```
|
524 |
|
525 | ### every
|
526 |
|
527 | Returns true if every elements of the array fits the predicate otherwise false
|
528 |
|
529 | API: `array | every: predicate`
|
530 |
|
531 | ```typescript
|
532 | this.itemsOne = [1, 1, 1];
|
533 | this.itemsTwo = [1, 1, 2];
|
534 | this.itemsThree = [2, 2, 2];
|
535 | this.predicate = (value: any, index: number, array: any[]): boolean => {
|
536 | return value === 1;
|
537 | };
|
538 | ```
|
539 |
|
540 | ```html
|
541 | <p>{{ itemsOne | every: predicate }}</p> <!-- Output: "true" -->
|
542 | <p>{{ itemsTwo | every: predicate }}</p> <!-- Output: "false" -->
|
543 | <p>{{ itemsThree | every: predicate }}</p> <!-- Output: "false" -->
|
544 | ```
|
545 |
|
546 | ### some
|
547 |
|
548 | Returns true if some elements of the array fits the predicate otherwise false
|
549 |
|
550 | API: `array | some: predicate`
|
551 |
|
552 | ```typescript
|
553 | this.itemsOne = [1, 1, 1];
|
554 | this.itemsTwo = [1, 1, 2];
|
555 | this.itemsThree = [2, 2, 2];
|
556 | this.predicate = (value: any, index: number, array: any[]): boolean => {
|
557 | return value === 1;
|
558 | };
|
559 | ```
|
560 |
|
561 | ```html
|
562 | <p>{{ itemsOne | some: predicate }}</p> <!-- Output: "true" -->
|
563 | <p>{{ itemsTwo | some: predicate }}</p> <!-- Output: "true" -->
|
564 | <p>{{ itemsThree | some: predicate }}</p> <!-- Output: "false" -->
|
565 | ```
|
566 |
|
567 | ### sample
|
568 |
|
569 | Returns sample items randomly from array
|
570 |
|
571 | API: `array | sample: [amount | default = 1]`
|
572 |
|
573 | ```html
|
574 | <p>{{ [1, 2, 3, 4] | sample }}</p> <!-- Output: "[2]" -->
|
575 | <p>{{ [1, 2, 3, 4] | sample: 2 }}</p> <!-- Output: "[4, 3]" -->
|
576 | ```
|
577 |
|
578 | ### groupBy
|
579 |
|
580 | Returns object of grouped by items by discriminator
|
581 |
|
582 | API: `array | groupBy: [string | Function]`
|
583 |
|
584 | ```typescript
|
585 | this.arrayObject = [{elm: 'foo', value: 0}, {elm: 'bar', value: 1}, {elm: 'foo', value: 2}];
|
586 | ```
|
587 |
|
588 | ```html
|
589 | <p>{{ arrayObject | groupBy: 'elm' }}</p> <!-- Output: "{foo: [{elm: 'foo', value: 0}, {elm: 'foo', value: 2}], bar: [{elm: 'bar', value: 1}]}" -->
|
590 | ```
|
591 |
|
592 | ## Object
|
593 |
|
594 | ### keys
|
595 |
|
596 | Returns array of object keys
|
597 |
|
598 | API: `object | keys`
|
599 |
|
600 | ```html
|
601 | <p>{{ {foo: 1, bar: 2} | keys }}</p> <!-- Output: "['foo', 'bar']" -->
|
602 | ```
|
603 |
|
604 | ### values
|
605 |
|
606 | Returns array of object values
|
607 |
|
608 | API: `object | values`
|
609 |
|
610 | ```html
|
611 | <p>{{ {foo: 1, bar: 2} | values }}</p> <!-- Output: "[1, 2]" -->
|
612 | ```
|
613 |
|
614 | ### pairs
|
615 |
|
616 | Returns array of an object key value pairs
|
617 |
|
618 | API: `object | pairs`
|
619 |
|
620 | ```html
|
621 | <p>{{ {foo: 1, bar: 2} | pairs }}</p> <!-- Output: "[['foo', 1], ['bar', 2]]" -->
|
622 | <p>{{ {foo: [1, 2], bar: [3, 4]} | pairs }}</p> <!-- Output: "[['foo', [1, 2]], ['bar', [3, 4]]]" -->
|
623 | ```
|
624 |
|
625 | ### pick
|
626 |
|
627 | Returns object with picked keys from object
|
628 |
|
629 | API: `object | pick: [key | string]]`
|
630 |
|
631 | ```html
|
632 | <p>{{ {foo: 1, bar: 2} | pick: 'foo' }}</p> <!-- Output: "{foo: 1}" -->
|
633 | <p>{{ {foo: 1, bar: 2} | pick: 'foo': 'bar' }}</p> <!-- Output: "{foo: 1, bar: 2}" -->
|
634 | ```
|
635 |
|
636 | ### omit
|
637 |
|
638 | Returns object after omitting keys from object (opposite of pick)
|
639 |
|
640 | API: `object | omit: [key | string]]`
|
641 |
|
642 | ```html
|
643 | <p>{{ {foo: 1, bar: 2} | omit: 'foo' }}</p> <!-- Output: "{bar: 2}" -->
|
644 | <p>{{ {foo: 1, bar: 2} | omit: 'foo': 'bar' }}</p> <!-- Output: "{}" -->
|
645 | ```
|
646 |
|
647 | ### invert
|
648 |
|
649 | Returns object with inverted keys and values. in case of equal values, subsequent values overwrite property assignments of previous values.
|
650 |
|
651 | API: `object | invert`
|
652 |
|
653 | ```html
|
654 | <p>{{ {foo: 1, bar: 2} | invert }}</p> <!-- Output: "{1: 'foo', 2: 'bar'}" -->
|
655 | ```
|
656 |
|
657 | ### invertBy
|
658 |
|
659 | Returns object with inverted keys and values. in case of equal values, will add to an array.
|
660 |
|
661 | API: `object | invertBy: [Function | optional]`
|
662 |
|
663 | ```typescript
|
664 | this.cb = (value): string => {
|
665 | return `name_${value}`;
|
666 | };
|
667 | ```
|
668 |
|
669 | ```html
|
670 | <p>{{ {foo: 1, bar: 2} | invertBy }}</p> <!-- Output: "{1: ['foo'], 2: ['bar']}" -->
|
671 | <p>{{ {foo: 1, bar: 2} | invertBy: cb }}</p> <!-- Output: "{name_1: ['foo'], name_2: ['bar']}" -->
|
672 | <p>{{ {a: 1, b: 2, c: 1, d: 2} | invertBy }}</p> <!-- Output: "{1: ['a', 'c'], 2: ['b', 'd']}" -->
|
673 | ```
|
674 |
|
675 | ## Math
|
676 |
|
677 | ### min
|
678 |
|
679 | Returns the minimum of a given array
|
680 |
|
681 | API: `array | min`
|
682 |
|
683 | ```html
|
684 | <p>{{ [1, 2, 3, 1, 2, 3] | min }}</p> <!-- Output: "1" -->
|
685 | ```
|
686 |
|
687 | ### max
|
688 |
|
689 | Returns the maximum of a given array
|
690 |
|
691 | API: `array | max`
|
692 |
|
693 | ```html
|
694 | <p>{{ [1, 2, 3, 1, 2, 3] | max }}</p> <!-- Output: "3" -->
|
695 | ```
|
696 |
|
697 | ### sum
|
698 |
|
699 | Returns the sum of a given array
|
700 |
|
701 | API: `array | sum`
|
702 |
|
703 | ```html
|
704 | <p>{{ [1, 2, 3, 4] | sum }}</p> <!-- Output: "10" -->
|
705 | ```
|
706 |
|
707 | ### percentage
|
708 |
|
709 | Returns percentage between numbers
|
710 |
|
711 | API: `number | percentage: [total | default = 100]: [floor | default = false]`
|
712 |
|
713 | ```html
|
714 | <p>{{ 5 | percentage }}</p> <!-- Output: "5" -->
|
715 | <p>{{ 5 | percentage: 160 }}</p> <!-- Output: "3.125" -->
|
716 | <p>{{ 5 | percentage: 160: true }}</p> <!-- Output: "3" -->
|
717 | ```
|
718 |
|
719 | ### ceil
|
720 |
|
721 | Returns ceil of a number by precision
|
722 |
|
723 | API: `number | ceil: [precision | default = 0]`
|
724 |
|
725 | ```html
|
726 | <p>{{ 42.123 | ceil }}</p> <!-- Output: "43" -->
|
727 | <p>{{ 42.123 | ceil: 2 }}</p> <!-- Output: "42.13" -->
|
728 | ```
|
729 |
|
730 | ### floor
|
731 |
|
732 | Returns floor of a number by precision
|
733 |
|
734 | API: `number | floor: [precision | default = 0]`
|
735 |
|
736 | ```html
|
737 | <p>{{ 42.123 | floor }}</p> <!-- Output: "42" -->
|
738 | <p>{{ 42.123 | floor: 2 }}</p> <!-- Output: "42.12" -->
|
739 | ```
|
740 |
|
741 | ### round
|
742 |
|
743 | Returns round of a number by precision
|
744 |
|
745 | API: `number | round: [precision | default = 0]`
|
746 |
|
747 | ```html
|
748 | <p>{{ 42.4 | round }}</p> <!-- Output: "42" -->
|
749 | <p>{{ 42.5 | round }}</p> <!-- Output: "43" -->
|
750 | <p>{{ 42.123 | round: 2 }}</p> <!-- Output: "42.12" -->
|
751 | ```
|
752 |
|
753 | ### sqrt
|
754 |
|
755 | Returns the square root of a number
|
756 |
|
757 | API: `number | sqrt`
|
758 |
|
759 | ```html
|
760 | <p>{{ 9 | sqrt }}</p> <!-- Output: "3" -->
|
761 | ```
|
762 |
|
763 | ### pow
|
764 |
|
765 | Returns the power of a number
|
766 |
|
767 | API: `number | pow: [power | default = 2]`
|
768 |
|
769 | ```html
|
770 | <p>{{ 3 | pow }}</p> <!-- Output: "9" -->
|
771 | <p>{{ 3 | pow: 3 }}</p> <!-- Output: "27" -->
|
772 | ```
|
773 |
|
774 | ### degrees
|
775 |
|
776 | Returns the degrees of a number in radians
|
777 |
|
778 | API: `number | degrees`
|
779 |
|
780 | ```html
|
781 | <p>{{ 3.141592653589793 | degrees }}</p> <!-- Output: "180" -->
|
782 | ```
|
783 |
|
784 | ### radians
|
785 |
|
786 | Returns the radians of a number in degrees
|
787 |
|
788 | API: `number | radians`
|
789 |
|
790 | ```html
|
791 | <p>{{ 180 | radians }}</p> <!-- Output: "3.141592653589793" -->
|
792 | ```
|
793 |
|
794 | ### bytes
|
795 |
|
796 | Returns bytes with a unit symbol
|
797 |
|
798 | API: `number | bytes`
|
799 |
|
800 | ```html
|
801 | <p>{{ 10 | bytes }}</p> <!-- Output: "10 B" -->
|
802 | <p>{{ 1000 | bytes }}</p> <!-- Output: "1 KB" -->
|
803 | <p>{{ 1000000 | bytes }}</p> <!-- Output: "1 MB" -->
|
804 | <p>{{ 1000000000 | bytes }}</p> <!-- Output: "1 GB" -->
|
805 | ```
|
806 |
|
807 | ## Boolean
|
808 |
|
809 | ### isNull
|
810 |
|
811 | API: `any | isNull`
|
812 |
|
813 | ```html
|
814 | <p>{{ null | isNull }}</p> <!-- Output: "true" -->
|
815 | <p>{{ 1 | isNull }}</p> <!-- Output: "false" -->
|
816 | ```
|
817 |
|
818 | ### isDefined
|
819 |
|
820 | API: `any | isDefined`
|
821 |
|
822 | ```html
|
823 | <p>{{ 1 | isDefined }}</p> <!-- Output: "true" -->
|
824 | <p>{{ undefined | isDefined }}</p> <!-- Output: "false" -->
|
825 | ```
|
826 |
|
827 | ### isUndefined
|
828 |
|
829 | API: `any | isUndefined`
|
830 |
|
831 | ```html
|
832 | <p>{{ 1 | isUndefined }}</p> <!-- Output: "false" -->
|
833 | <p>{{ undefined | isUndefined }}</p> <!-- Output: "true" -->
|
834 | ```
|
835 |
|
836 |
|
837 | ### isString
|
838 |
|
839 | API: `any | isString`
|
840 |
|
841 | ```html
|
842 | <p>{{ 1 | isString }}</p> <!-- Output: "false" -->
|
843 | <p>{{ '' | isString }}</p> <!-- Output: "true" -->
|
844 | ```
|
845 |
|
846 | ### isNumber
|
847 |
|
848 | API: `any | isNumber`
|
849 |
|
850 | ```typescript
|
851 | this.func = () => {};
|
852 | this.num = 1;
|
853 | ```
|
854 |
|
855 | ```html
|
856 | <p>{{ num | isNumber }}</p> <!-- Output: "true" -->
|
857 | <p>{{ func | isNumber }}</p> <!-- Output: "false" -->
|
858 | ```
|
859 |
|
860 | ### isArray
|
861 |
|
862 | API: `any | isArray`
|
863 |
|
864 | ```typescript
|
865 | this.arr = [1, 2];
|
866 | this.num = 1;
|
867 | ```
|
868 |
|
869 | ```html
|
870 | <p>{{ num | isArray }}</p> <!-- Output: "false" -->
|
871 | <p>{{ arr | isArray }}</p> <!-- Output: "true" -->
|
872 | ```
|
873 |
|
874 | ### isObject
|
875 |
|
876 | API: `any | isObject`
|
877 |
|
878 | ```typescript
|
879 | this.obj = {a: 1, b: 2};
|
880 | this.num = 1;
|
881 | ```
|
882 |
|
883 | ```html
|
884 | <p>{{ num | isObject }}</p> <!-- Output: "false" -->
|
885 | <p>{{ obj | isObject }}</p> <!-- Output: "true" -->
|
886 | ```
|
887 |
|
888 | ### isGreaterThan
|
889 |
|
890 | API: `number | isGreaterThan: otherNumber`
|
891 |
|
892 | ```html
|
893 | <p>{{ 1 | isGreaterThan: 1 }}</p> <!-- Output: "false" -->
|
894 | <p>{{ 1 | isGreaterThan: 2 }}</p> <!-- Output: "false" -->
|
895 | <p>{{ 2 | isGreaterThan: 1 }}</p> <!-- Output: "true" -->
|
896 | ```
|
897 |
|
898 | ### isGreaterEqualThan
|
899 |
|
900 | API: `number | isGreaterEqualThan: otherNumber`
|
901 |
|
902 | ```html
|
903 | <p>{{ 1 | isGreaterEqualThan: 1 }}</p> <!-- Output: "true" -->
|
904 | <p>{{ 1 | isGreaterEqualThan: 2 }}</p> <!-- Output: "false" -->
|
905 | <p>{{ 2 | isGreaterEqualThan: 1 }}</p> <!-- Output: "true" -->
|
906 | ```
|
907 |
|
908 | ### isLessThan
|
909 |
|
910 | API: `number | isLessThan: otherNumber`
|
911 |
|
912 | ```html
|
913 | <p>{{ 1 | isLessThan: 1 }}</p> <!-- Output: "false" -->
|
914 | <p>{{ 1 | isLessThan: 2 }}</p> <!-- Output: "true" -->
|
915 | <p>{{ 2 | isLessThan: 1 }}</p> <!-- Output: "false" -->
|
916 | ```
|
917 |
|
918 | ### isLessEqualThan
|
919 |
|
920 | API: `number | isLessEqualThan: otherNumber`
|
921 |
|
922 | ```html
|
923 | <p>{{ 1 | isLessEqualThan: 1 }}</p> <!-- Output: "true" -->
|
924 | <p>{{ 1 | isLessEqualThan: 2 }}</p> <!-- Output: "true" -->
|
925 | <p>{{ 2 | isLessEqualThan: 1 }}</p> <!-- Output: "false" -->
|
926 | ```
|
927 |
|
928 | ### isEqualTo
|
929 |
|
930 | API: `number | isEqualTo: otherNumber`
|
931 |
|
932 | ```html
|
933 | <p>{{ 1 | isEqualTo: 1 }}</p> <!-- Output: "true" -->
|
934 | <p>{{ 1 | isEqualTo: '1' }}</p> <!-- Output: "true" -->
|
935 | <p>{{ 1 | isEqualTo: 2 }}</p> <!-- Output: "false" -->
|
936 | <p>{{ 2 | isEqualTo: 1 }}</p> <!-- Output: "false" -->
|
937 | ```
|
938 |
|
939 | ### isNotEqualTo
|
940 |
|
941 | API: `number | isNotEqualTo: otherNumber`
|
942 |
|
943 | ```html
|
944 | <p>{{ 1 | isNotEqualTo: 1 }}</p> <!-- Output: "false" -->
|
945 | <p>{{ 1 | isNotEqualTo: '1' }}</p> <!-- Output: "false" -->
|
946 | <p>{{ 1 | isNotEqualTo: 2 }}</p> <!-- Output: "true" -->
|
947 | <p>{{ 2 | isNotEqualTo: 1 }}</p> <!-- Output: "true" -->
|
948 | ```
|
949 |
|
950 | ### isIdenticalTo
|
951 |
|
952 | API: `number | isIdenticalTo: otherNumber`
|
953 |
|
954 | ```html
|
955 | <p>{{ 1 | isIdenticalTo: 1 }}</p> <!-- Output: "true" -->
|
956 | <p>{{ 1 | isIdenticalTo: '1' }}</p> <!-- Output: "false" -->
|
957 | <p>{{ 1 | isIdenticalTo: 2 }}</p> <!-- Output: "false" -->
|
958 | <p>{{ 2 | isIdenticalTo: 1 }}</p> <!-- Output: "false" -->
|
959 | ```
|
960 |
|
961 | ### isNotIdenticalTo
|
962 |
|
963 | API: `number | isNotIdenticalTo: otherNumber`
|
964 |
|
965 | ```html
|
966 | <p>{{ 1 | isNotIdenticalTo: 1 }}</p> <!-- Output: "false" -->
|
967 | <p>{{ 1 | isNotIdenticalTo: '1' }}</p> <!-- Output: "true" -->
|
968 | <p>{{ 1 | isNotIdenticalTo: 2 }}</p> <!-- Output: "true" -->
|
969 | <p>{{ 2 | isNotIdenticalTo: 1 }}</p> <!-- Output: "true" -->
|
970 | ```
|
971 |
|
972 | ## Contributing
|
973 |
|
974 | * Before adding any new feature or a fix make sure to open an issue first!
|
975 |
|
976 | Make sure you have `angular-cli` & `karma` installed globally.
|
977 |
|
978 | ```bash
|
979 | $ npm install -g angular-cli karma
|
980 | ```
|
981 |
|
982 | Clone the project, and install dependencies.
|
983 |
|
984 | ```bash
|
985 | $ git clone https://github.com/danrevah/ng2-pipes.git
|
986 | $ npm install
|
987 | ```
|
988 |
|
989 | Create a new branch
|
990 |
|
991 | ```bash
|
992 | $ git checkout -b feat/someFeature
|
993 | ```
|
994 |
|
995 | Add tests & make sure everything is running properly
|
996 | ```bash
|
997 | $ npm test
|
998 | ```
|
999 |
|
1000 | Commit & push, and make a pull request!
|