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 |
|
122 | 1. Use npm to install the package
|
123 |
|
124 | ```terminal
|
125 | $ npm install ngx-pipes --save
|
126 | ```
|
127 |
|
128 | 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`, `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 |
|
142 | 3. 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 |
|
159 | 4. You can also use pipes as part of your template for ex.
|
160 |
|
161 | ```html
|
162 | <p>{{ 'foo' | reverse }}</p> <!-- Output: "oof" -->
|
163 | ```
|
164 |
|
165 | and 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 |
|
176 | Time ago pipe converts date to 'just now', 'X days ago', 'last week', 'X days ago', etc..
|
177 |
|
178 | **Usage:** `string | timeAgo`
|
179 | ```typescript
|
180 | import * as moment from 'moment';
|
181 |
|
182 | const now = new Date();
|
183 |
|
184 | // timeAgo also supports moment.js objects
|
185 | const 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 |
|
197 | Prefixes 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 |
|
207 | Repeats 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 |
|
217 | Scans 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 |
|
227 | Shortening 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 |
|
237 | Strips 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 |
|
248 | Uppercase first letter of first word
|
249 |
|
250 | ```html
|
251 | <p>{{'foo bar' | ucfirst }}</p> <!-- Output: "Foo bar" -->
|
252 | ```
|
253 |
|
254 | ### ucwords
|
255 |
|
256 | Uppercase 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 |
|
265 | Strips 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 |
|
276 | Strips 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 |
|
287 | Strips 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 |
|
298 | Reverses a string
|
299 |
|
300 | **Usage:** `string | reverse`
|
301 |
|
302 | ```html
|
303 | <p>{{'foo bar' | reverse }}</p> <!-- Output: "rab oof" -->
|
304 | ```
|
305 |
|
306 | ### slugify
|
307 |
|
308 | Slugify 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 |
|
319 | Camelize 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 |
|
331 | Removes 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 |
|
342 | Converts 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 |
|
352 | Converts 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 |
|
363 | Tests 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 |
|
375 | Returns 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 |
|
387 | Left 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 |
|
400 | Right 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 |
|
411 | Make 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 |
|
426 | Wrap 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 |
|
439 | Returns array of diff between arrays
|
440 |
|
441 | **Usage:** `array | diff: [ARRAY]: [ARRAY]: ... : [ARRAY]`
|
442 |
|
443 | ```typescript
|
444 | this.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 |
|
453 | Flattens nested array, passing shallow will mean it will only be flattened a single level
|
454 |
|
455 | **Usage:** `array | flatten: [shallow|optional]`
|
456 |
|
457 | ```typescript
|
458 | this.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 |
|
468 | Slicing off the end of the array by n elements
|
469 |
|
470 | **Usage:** `array | initial: n`
|
471 |
|
472 | ```typescript
|
473 | this.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 |
|
482 | Slicing off the start of the array by n elements
|
483 |
|
484 | **Usage:** `array | tail: n`
|
485 |
|
486 | ```typescript
|
487 | this.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 |
|
496 | Returns the intersections of an arrays
|
497 |
|
498 | **Usage:** `array | intersection: [ARRAY]: [ARRAY]: ... : [ARRAY]`
|
499 |
|
500 | ```typescript
|
501 | this.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 |
|
510 | Returns an array with range of numbers
|
511 |
|
512 | **Usage:** `range: [start: number, default = '1']: [count: number]: [step: number | optional, default = '1']`
|
513 |
|
514 | ```typescript
|
515 | this.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 |
|
524 | Reverses an array
|
525 |
|
526 | **Usage:** `array | reverse`
|
527 |
|
528 | ```typescript
|
529 | this.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 |
|
538 | Removes un-truthy values from array
|
539 |
|
540 | **Usage:** `array | truthify`
|
541 |
|
542 | ```typescript
|
543 | this.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 |
|
552 | Combine two arrays
|
553 |
|
554 | **Usage:** `array | union: [ARRAY]`
|
555 |
|
556 | ```typescript
|
557 | this.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 |
|
566 | Removes duplicates from array
|
567 |
|
568 | **Usage:** `array | unique: 'Property (Optional)'`
|
569 |
|
570 | ```typescript
|
571 | this.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 |
|
580 | Returns array without specific elements
|
581 |
|
582 | **Usage:** `array | without: [ARRAY]`
|
583 |
|
584 | ```typescript
|
585 | this.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 |
|
594 | Returns array of properties values
|
595 |
|
596 | **Usage:** `array | pluck: propertyName`
|
597 |
|
598 | ```typescript
|
599 | this.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 |
|
628 | Returns randomly shuffled array
|
629 |
|
630 | **Usage:** `array | shuffle`
|
631 |
|
632 | ```typescript
|
633 | this.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 |
|
642 | Returns true if every elements of the array fits the predicate otherwise false
|
643 |
|
644 | **Usage:** `array | every: predicate`
|
645 |
|
646 | ```typescript
|
647 | this.itemsOne = [1, 1, 1];
|
648 | this.itemsTwo = [1, 1, 2];
|
649 | this.itemsThree = [2, 2, 2];
|
650 | this.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 |
|
663 | Returns true if some elements of the array fits the predicate otherwise false
|
664 |
|
665 | **Usage:** `array | some: predicate`
|
666 |
|
667 | ```typescript
|
668 | this.itemsOne = [1, 1, 1];
|
669 | this.itemsTwo = [1, 1, 2];
|
670 | this.itemsThree = [2, 2, 2];
|
671 | this.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 |
|
684 | Returns 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 |
|
695 | Returns 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
|
700 | this.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 |
|
707 | this.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 |
|
731 | Identical to groupBy pipe, the only difference is that it's an impure pipe.
|
732 |
|
733 | Impure pipes: https://angular.io/guide/pipes#impure-pipes
|
734 |
|
735 | ### filterBy
|
736 |
|
737 | Returns object array of grouped by items by discriminator
|
738 |
|
739 | **Usage:** `array | filterBy: [prop, nested.prop, ...]: search: [strict | optional]`
|
740 |
|
741 | ```typescript
|
742 | this.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 |
|
774 | Identical to filterBy pipe, the only difference is that it's an impure pipe.
|
775 |
|
776 | Impure pipes: https://angular.io/guide/pipes#impure-pipes
|
777 |
|
778 | ### orderBy
|
779 |
|
780 | Returns ordered array by configuration
|
781 |
|
782 | **Usage:** `array | orderBy: [prop, nested.prop, array of props, ...]`
|
783 |
|
784 | ```typescript
|
785 | const numbers = [2, 1, 3];
|
786 |
|
787 | const 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 |
|
794 | const 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 |
|
826 | Identical to orderBy pipe, the only difference is that it's an impure pipe.
|
827 |
|
828 | Impure pipes: https://angular.io/guide/pipes#impure-pipes
|
829 |
|
830 | ### chunk
|
831 |
|
832 | Returns 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 |
|
843 | Returns 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 |
|
856 | Returns 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 |
|
866 | Returns 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 |
|
876 | Returns 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 |
|
887 | Returns 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 |
|
898 | Returns 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 |
|
909 | Returns 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 |
|
919 | Returns 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
|
924 | this.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 |
|
937 | Returns 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 |
|
952 | Returns 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 |
|
962 | Returns 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 |
|
972 | Returns 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 |
|
982 | Returns 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 |
|
993 | Returns 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 |
|
1005 | Returns 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 |
|
1016 | Returns 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 |
|
1027 | Returns 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 |
|
1039 | Returns 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 |
|
1049 | Returns 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 |
|
1060 | Returns 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 |
|
1070 | Returns 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 |
|
1080 | Returns 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
|
1135 | this.func = () => {};
|
1136 | this.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
|
1149 | this.arr = [1, 2];
|
1150 | this.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
|
1163 | this.obj = {a: 1, b: 2};
|
1164 | this.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 |
|
1260 | Make sure you have `angular-cli` & `karma` installed globally.
|
1261 |
|
1262 | ```bash
|
1263 | $ npm install -g angular-cli karma
|
1264 | ```
|
1265 |
|
1266 | Clone the project, and install dependencies.
|
1267 |
|
1268 | ```bash
|
1269 | $ git clone https://github.com/danrevah/ngx-pipes.git
|
1270 | $ npm install
|
1271 | ```
|
1272 |
|
1273 | Create a new branch
|
1274 |
|
1275 | ```bash
|
1276 | $ git checkout -b feat/someFeature
|
1277 | ```
|
1278 |
|
1279 | Add tests & make sure everything is running properly
|
1280 | ```bash
|
1281 | $ npm test
|
1282 | ```
|
1283 |
|
1284 | Commit & push, and make a pull request!
|