ngx-pipes

src="assets/ngx-logo.png" width="160" border="0" alt="NGX-PIPES">

Useful pipes for Angular with no external dependencies

#### Extras

TypeSerializer - Serializer / Deserializer, designed to make prettier code while using decorators.

Segal Decorators - Bunch of highly useful decorators, helps in writing a more concise code while improving readability

- Installation
- Contributing
- Changelog
- Date
- timeAgo
- String
- aOrAn
- repeat
- scan
- shorten
- stripTags
- ucfirst
- ucwords
- trim
- ltrim
- rtrim
- reverse
- slugify
- camelize
- latinise
- lines
- underscore
- test
- match
- lpad
- rpad
- makePluralString
- wrap
- Array
- diff
- flatten
- initial
- intersection
- range
- reverse
- tail
- truthify
- union
- unique
- without
- pluck
- shuffle
- every
- some
- sample
- groupBy
- groupByImpure
- filterBy
- filterByImpure
- orderBy
- orderByImpure
- chunk
- fromPairs
- Object
- keys
- values
- pairs
- pick
- omit
- invert
- invertBy
- diffObj
- Math
- min
- max
- sum
- average
- percentage
- ceil
- floor
- round
- sqrt
- pow
- degrees
- radians
- bytes
- Boolean
- isNull
- isDefined
- isUndefined
- isString
- isFunction
- isNumber
- isArray
- isObject
- isGreaterThan
- isGreaterEqualThan
- isLessThan
- isLessEqualThan
- isEqualTo
- isNotEqualTo
- isIdenticalTo
- isNotIdenticalTo

Installation

1. Use npm to install the package

``terminal $ npm install ngx-pipes --save`

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.

`typescript import {NgPipesModule} from 'ngx-pipes'; @NgModule({ // ... imports: [ // ... NgPipesModule ] })`

3. Pipes are also injectable and can be used in Components / Services / etc..

`typescript import {ReversePipe} from 'ngx-pipes';

@Component({ // .. providers: [ReversePipe] }) export class AppComponent { constructor(private reversePipe: ReversePipe) { this.reversePipe.transform('foo'); // Returns: "oof" } // .. }`

4. You can also use pipes as part of your template for ex.

`html

{{ 'foo' | reverse }}


and it's also possible to stack multiple pipes

`html

{{ ' foo' | ltrim | reverse }}



Date
$3
Time ago pipe converts date to 'just now', 'X days ago', 'last week', 'X days ago', etc..

Usage: string | timeAgo`typescript import * as moment from 'moment';

const now = new Date();

// timeAgo also supports moment.js objects const lastWeek = moment().subtract(10, 'days');`

`html Updated: {{now | timeAgo}} Updated: {{lastWeek | timeAgo}}`

`String`

`$3`

Prefixes input string with "a" or "an".

Usage: string | aOrAn

`html This is a picture of {{imageDescription | aOrAn}}`

`$3`

Repeats a string n times

Usage: string | repeat: times: [separator|optional]

`html

{{ 'example' | repeat: 3: '@' }}

$3

Scans string and replace {i} placeholders by equivalent member of the array

Usage: string | scan: [ARRAY]

`html

{{'Hey {0}, {1}' | scan: ['foo', 'bar']}}


$3
Shortening a string by length and providing a custom string to denote an omission

Usage: string | shorten: length: [suffix|optional]: [wordBreak boolean|optional]

`html

{{'Hey foo bar' | shorten: 3: '...'}}


$3
Strips a HTML tags from string and providing which tags should not be removed

Usage: string | stripTags: [ARRAY]

`html

{{'foo

bar

' | stripTags }}
 
{{'foo 
bar
' | stripTags: 'p'}}


$3
Uppercase first letter of first word

`html

{{'foo bar' | ucfirst }}


$3
Uppercase first letter every word

`html

{{'foo bar' | ucwords }}

 
{{'shaquille o'neal' | ucwords }}


$3
Strips characters from the beginning and end of a string (default character is space).

Usage: string | trim: [characters|optional]

`html

{{' foo ' | trim }}

 
{{'foobarfoo' | trim: 'foo' }}


$3
Strips characters from the beginning of a string (default character is space).

Usage: string | ltrim: [characters|optional]

`html

{{' foo ' | ltrim }}

 
{{'foobarfoo' | ltrim: 'foo' }}


$3
Strips characters from the end of a string (default character is space).

Usage: string | rtrim: [characters|optional]

`html

{{' foo ' | rtrim }}

 
{{'foobarfoo' | rtrim: 'foo' }}


$3
Reverses a string

Usage: string | reverse

`html

{{'foo bar' | reverse }}


$3
Slugify a string (lower case and add dash between words).

Usage: string | slugify

`html

{{'Foo Bar' | slugify }}

 
{{'Some Text To Slugify' | slugify }}


$3
Camelize a string replaces dashes and underscores and converts to camelCase string.

Usage: string | camelize

`html

{{'foo_bar' | camelize }}

 
{{'some_dashed-with-underscore' | camelize }}
 
{{'-dash_first-' | camelize }}


$3
Removes accents from Latin characters.

Usage: string | latinise

`html

{{'Féé' | latinise }}

 
{{'foo' | latinise }}


$3
Converts a string with new lines into an array of each line.

Usage: string | lines

`html

{{'Some\nSentence with\r\nNew line' | lines }}


$3
Converts camelCase string to underscore.

Usage: string | underscore

`html

{{'angularIsAwesome' | underscore }}

 
{{'FooBar' | underscore }}


$3
Tests if a string matches a pattern.

Usage: string | test: {RegExp}: {Flags}

`html

{{'foo 42' | test: '[\\d]+$': 'g' }}

 
{{'42 foo' | test: '[\\d]+$': 'g' }}
 
{{'FOO' | test: '^foo': 'i' }}


$3
Returns array of matched elements in string.

Usage: string | match: {RegExp}: {Flags}

`html

{{'foo 42' | match: '[\\d]+$': 'g' }}

 
{{'42 foo' | match: '[\\d]+$': 'g' }}
 
{{'FOO' | match: '^foo': 'i' }}


$3
Left pad a string to a given length using a given pad character (default is a space)

Usage:string | lpad: length: [padCharacter:string|optional]

`html

{{'foo' | lpad: 5}}

 

{{String(3) | lpad: 5: '0'}}


$3
Right pad a string to a given length using a given pad character  (default is a space)

Usage:string | rpad: length: [padCharacter:string|optional]

`html

{{'Foo' | rpad: 5: '#'}}

$3

Make a singular string plural. Optional quantity argument specifies how many of the singular string there are.

Usage: string | makePluralString: [quantity:string|optional]

`html {{'Painting' | makePluralString}} {{'Painting' | makePluralString: 1}} {{'One Painting' | makePluralString: 1}} {{'Painting' | makePluralString: 4}} {{'Four Painting' | makePluralString: 4}}`

`$3`

Wrap a string between a prefix and a suffix

Usage:string | wrap: prefix: suffix

`html

{{'Foo' | wrap: 'nice prefix ': ' and awesome suffix!'}}


Array
$3
Returns array of diff between arrays

Usage: array | diff: [ARRAY]: [ARRAY]: ... : [ARRAY]

`typescript this.items = [1, 2, 3, 4];`

`html


$3
Flattens nested array, passing shallow will mean it will only be flattened a single level

Usage: array | flatten: [shallow|optional]

`typescript this.items = [1,2,3,[4,5,6,[7,8,9],[10,11,12,13,[14],[15],[16, [17]]]]];`

`html


$3
Slicing off the end of the array by n elements

Usage: array | initial: n

`typescript this.items = [first, second, third];`

`html


$3
Slicing off the start of the array by n elements

Usage: array | tail: n

`typescript this.items = [first, second, third];`

`html


$3
Returns the intersections of an arrays

Usage: array | intersection: [ARRAY]: [ARRAY]: ... : [ARRAY]

`typescript this.items = [1, 2, 3, 4, 5];`

`html


$3
Returns an array with range of numbers

Usage: range: [start: number, default = '1']: [count: number]: [step: number | optional, default = '1']

`typescript this.items = this.rangePipe.transform(1, 5); // Returns: [1, 2, 3, 4, 5]`

`html


$3
Reverses an array

Usage: array | reverse

`typescript this.items = [1, 2, 3];`

`html


$3
Removes un-truthy values from array

Usage: array | truthify

`typescript this.items = [null, 1, false, undefined, 2, 0, 3, NaN, 4, ''];`

`html


$3
Combine two arrays

Usage: array | union: [ARRAY]

`typescript this.items = [1, 2, 3];`

`html


$3
Removes duplicates from array

Usage: array | unique: 'Property (Optional)'

`typescript this.items = [1, 2, 3, 1, 2, 3];`

`html


$3
Returns array without specific elements

Usage: array | without: [ARRAY]

`typescript this.items = [1, 2, 3, 1, 2, 3];`

`html


$3
Returns array of properties values

Usage: array | pluck: propertyName

`typescript this.items = [ { a: 1, b: { c: 4 } }, { a: 2, b: { c: 5 } }, { a: 3, b: { c: 6 } }, ];`

`html


$3
Returns randomly shuffled array

Usage: array | shuffle

`typescript this.items = [1, 2, 3, 4, 5, 6];`

`html


$3
Returns true if every elements of the array fits the predicate otherwise false

Usage: array | every: predicate

`typescript this.itemsOne = [1, 1, 1]; this.itemsTwo = [1, 1, 2]; this.itemsThree = [2, 2, 2]; this.predicate = (value: any, index: number, array: any[]): boolean => { return value === 1; };`

`html

{{ itemsOne | every: predicate }}

 
{{ itemsTwo | every: predicate }}
 
{{ itemsThree | every: predicate }}


$3
Returns true if some elements of the array fits the predicate otherwise false

Usage: array | some: predicate

`typescript this.itemsOne = [1, 1, 1]; this.itemsTwo = [1, 1, 2]; this.itemsThree = [2, 2, 2]; this.predicate = (value: any, index: number, array: any[]): boolean => { return value === 1; };`

`html

{{ itemsOne | some: predicate }}

 
{{ itemsTwo | some: predicate }}
 
{{ itemsThree | some: predicate }}


$3
Returns sample items randomly from array

Usage: array | sample: [amount | default = 1]

`html

{{ [1, 2, 3, 4] | sample }}

 
{{ [1, 2, 3, 4] | sample: 2 }}


$3
Returns object of grouped by items by discriminator, and supports nested properties.

`typescript this.arrayObject = [ {id: 1, elm: 'foo', value: 0}, {id: 2, elm: 'bar', value: 1}, {id: 3, elm: 'foo', value: 2}, {id: 4, elm: 'foo', value: 2} ];

this.arrayNestedObject = [ {id: 1, prop: { deep: 'foo' }}, {id: 2, prop: { deep: 'bar' }}, {id: 3, prop: { deep: 'foo' }}, {id: 4, prop: { deep: 'bar' }} ];`

`html

{{ arrayObject | groupBy: 'elm' }}

 
{{ arrayObject | groupBy: ['elm', 'value'] }}
 
{{ arrayObject | groupBy: ['elm', 'value']: '_' }}
 
{{ arrayNestedObject | groupBy: 'prop.deep' }}


$3
Identical to groupBy pipe, the only difference is that it's an impure pipe.
Impure pipes: https://angular.io/guide/pipes#impure-pipes
$3
Returns object array of grouped by items by discriminator

Usage: array | filterBy: [prop, nested.prop, ...]: search: [strict | optional]

`typescript this.users = [ {id: 1, first_name: 'John', last_name: 'Doe', work: { company: 'Foo Tech' }}, {id: 2, first_name: 'Jane', last_name: 'West', work: { company: 'AAA Solutions' }}, {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'}]} ];`

`html

{{ users | filterBy: ['id']: 1 }}

 

{{ users | filterBy: ['work.company']: 'Bar Tech' }}
 

{{ users | filterBy: ['arr.name']: 'foo' }}
 

{{ users | filterBy: ['first_name', 'last_name']: 'John' }}


{{ users | filterBy: ['first_name', 'last_name']: ['John', 'Cent'] }}


$3
Identical to filterBy pipe, the only difference is that it's an impure pipe.
Impure pipes: https://angular.io/guide/pipes#impure-pipes
$3
Returns ordered array by configuration

Usage: array | orderBy: [prop, nested.prop, array of props, ...]

`typescript const numbers = [2, 1, 3];

const obj = [ {id: 4, name: 'Dave', amount: 2}, {id: 2, name: 'Michael', amount: 2}, {id: 3, name: 'Dan', amount: 1}, {id: 1, name: 'John', amount: 1} ];

const deepObj = [ {id: 1, name: 'John', amount: 1337, deep: {prop: 4}}, {id: 2, name: 'Michael', amount: 42, deep: {prop: 2}}, {id: 3, name: 'Dan', amount: 1, deep: {prop: 1}}, {id: 4, name: 'Dave', amount: 2, deep: {prop: 3}} ];`

`html

{{ numbers | orderBy }}

  
{{ numbers | orderBy: '-' }}
  

{{ deepObj | orderBy: 'amount' }}
  

{{ deepObj | orderBy: '-amount' }}
  

{{ deepObj | orderBy: 'deep.prop' }}
  

{{ deepObj | orderBy: '-deep.prop' }}
  

{{ obj | orderBy: ['amount', 'id'] }}


$3
Identical to orderBy pipe, the only difference is that it's an impure pipe.
Impure pipes: https://angular.io/guide/pipes#impure-pipes
$3
Returns chunked array or string by size

Usage: array | size: [number | default = 1]

`html

{{ [1, 2, 3, 4, 5] | chunk: 2 }}


$3
Returns object of an array of key value pairs

Usage: array | fromPairs

`html

{{ [['foo', 1], ['bar', 2]] | fromPairs }}

 
{{ [['foo', [1, 2]], ['bar', [3, 4]]] | fromPairs }}


Object
$3
Returns array of object keys

Usage: object | keys

`html

{{ {foo: 1, bar: 2} | keys }}


$3
Returns array of object values

Usage: object | values

`html

{{ {foo: 1, bar: 2} | values }}


$3
Returns array of an object key value pairs

Usage: object | pairs

`html

{{ {foo: 1, bar: 2} | pairs }}

 
{{ {foo: [1, 2], bar: [3, 4]} | pairs }}


$3
Returns object with picked keys from object

Usage: object | pick: [key | string]]

`html

{{ {foo: 1, bar: 2} | pick: 'foo' }}

 
{{ {foo: 1, bar: 2} | pick: 'foo': 'bar' }}


$3
Returns object after omitting keys from object (opposite of pick)

Usage: object | omit: [key | string]]

`html

{{ {foo: 1, bar: 2} | omit: 'foo' }}

 
{{ {foo: 1, bar: 2} | omit: 'foo': 'bar' }}


$3
Returns object with inverted keys and values. in case of equal values, subsequent values overwrite property assignments of previous values.

Usage: object | invert

`html

{{ {foo: 1, bar: 2} | invert }}


$3
Returns object with inverted keys and values. in case of equal values, will add to an array.

Usage: object | invertBy: [Function | optional]

`typescript this.cb = (value): string => { returnname_${value}; };`

`html

{{ {foo: 1, bar: 2} | invertBy }}

 
{{ {foo: 1, bar: 2} | invertBy: cb }}
 
{{ {a: 1, b: 2, c: 1, d: 2} | invertBy }}


$3
Returns a diff object of two objects

Usage: object | diffObj: Object

`html

{{ {a: 1} | diffObj: {a: 1} }}

 
{{ {a: 1} | diffObj: {a: 2} }}
 
{{ {a: 1, b: 2} | diffObj: {a: 1, b: 1} }}
 
{{ {a: 1, b: 2, c: {d: 3} } | diffObj: {a: 1, b: 1, c: {d: 1} } }}


Math
$3
Returns the minimum of a given array

Usage: array | min

`html

{{ [1, 2, 3, 1, 2, 3] | min }}


$3
Returns the maximum of a given array

Usage: array | max

`html

{{ [1, 2, 3, 1, 2, 3] | max }}


$3
Returns the sum of a given array

Usage: array | sum

`html

{{ [1, 2, 3, 4] | sum }}


$3
Returns the average of a given array

Usage: array | average

`html

{{ [1, 2, 3] | average }}

 
{{ [1, 2] | average }}


$3
Returns percentage between numbers

Usage: number | percentage: [total | default = 100]: [floor | default = false]

`html

{{ 5 | percentage }}

 
{{ 5 | percentage: 160 }}
 
{{ 5 | percentage: 160: true }}


$3
Returns ceil of a number by precision

Usage: number | ceil: [precision | default = 0]

`html

{{ 42.123 | ceil }}

 
{{ 42.123 | ceil: 2 }}


$3
Returns floor of a number by precision

Usage: number | floor: [precision | default = 0]

`html

{{ 42.123 | floor }}

 
{{ 42.123 | floor: 2 }}


$3
Returns round of a number by precision

Usage: number | round: [precision | default = 0]

`html

{{ 42.4 | round }}

 
{{ 42.5 | round }}
 
{{ 42.123 | round: 2 }}


$3
Returns the square root of a number

Usage: number | sqrt

`html

{{ 9 | sqrt }}


$3
Returns the power of a number

Usage: number | pow: [power | default = 2]

`html

{{ 3 | pow }}

 
{{ 3 | pow: 3 }}


$3
Returns the degrees of a number in radians

Usage: number | degrees

`html

{{ 3.141592653589793 | degrees }}


$3
Returns the radians of a number in degrees

Usage: number | radians

`html

{{ 180 | radians }}


$3
Returns bytes with a unit symbol

Usage: number | bytes: [precision]

`html

{{ 10 | bytes }}

 
{{ 1048576 | bytes }}
 
{{ 1073741824 | bytes }}
 
{{ 1.0995116e12 | bytes }}


Boolean
$3

Usage: any | isNull

`html

{{ null | isNull }}

 
{{ 1 | isNull }}

$3

Usage: any | isDefined

`html

{{ 1 | isDefined }}

 
{{ undefined | isDefined }}

$3

Usage: any | isUndefined

`html

{{ 1 | isUndefined }}

 
{{ undefined | isUndefined }}

$3

Usage: any | isString

`html

{{ 1 | isString }}

 
{{ '' | isString }}

$3

Usage: any | isNumber

`typescript this.func = () => {}; this.num = 1;`

`html

{{ num | isNumber }}

 
{{ func | isNumber }}

$3

Usage: any | isArray

`typescript this.arr = [1, 2]; this.num = 1;`

`html

{{ num | isArray }}

 
{{ arr | isArray }}

$3

Usage: any | isObject

`typescript this.obj = {a: 1, b: 2}; this.num = 1;`

`html

{{ num | isObject }}

 
{{ obj | isObject }}

$3

Usage: number | isGreaterThan: otherNumber

`html

{{ 1 | isGreaterThan: 1 }}

 
{{ 1 | isGreaterThan: 2 }}
 
{{ 2 | isGreaterThan: 1 }}

$3

Usage: number | isGreaterEqualThan: otherNumber

`html

{{ 1 | isGreaterEqualThan: 1 }}

 
{{ 1 | isGreaterEqualThan: 2 }}
 
{{ 2 | isGreaterEqualThan: 1 }}

$3

Usage: number | isLessThan: otherNumber

`html

{{ 1 | isLessThan: 1 }}

 
{{ 1 | isLessThan: 2 }}
 
{{ 2 | isLessThan: 1 }}

$3

Usage: number | isLessEqualThan: otherNumber

`html

{{ 1 | isLessEqualThan: 1 }}

 
{{ 1 | isLessEqualThan: 2 }}
 
{{ 2 | isLessEqualThan: 1 }}

$3

Usage: number | isEqualTo: otherNumber

`html

{{ 1 | isEqualTo: 1 }}

 
{{ 1 | isEqualTo: '1' }}
 
{{ 1 | isEqualTo: 2 }}
 
{{ 2 | isEqualTo: 1 }}

$3

Usage: number | isNotEqualTo: otherNumber

`html

{{ 1 | isNotEqualTo: 1 }}

 
{{ 1 | isNotEqualTo: '1' }}
 
{{ 1 | isNotEqualTo: 2 }}
 
{{ 2 | isNotEqualTo: 1 }}

$3

Usage: number | isIdenticalTo: otherNumber

`html

{{ 1 | isIdenticalTo: 1 }}

 
{{ 1 | isIdenticalTo: '1' }}
 
{{ 1 | isIdenticalTo: 2 }}
 
{{ 2 | isIdenticalTo: 1 }}

$3

Usage: number | isNotIdenticalTo: otherNumber

`html

{{ 1 | isNotIdenticalTo: 1 }}

 
{{ 1 | isNotIdenticalTo: '1' }}
 
{{ 1 | isNotIdenticalTo: 2 }}
 
{{ 2 | isNotIdenticalTo: 1 }}


Contributing
* Before adding any new feature or a fix make sure to open an issue first!

Make sure you have angular-cli & karma installed globally.

`bash $ npm install -g angular-cli karma`

Clone the project, and install dependencies.

`bash $ git clone https://github.com/danrevah/ngx-pipes.git $ npm install`

Create a new branch

`bash $ git checkout -b feat/someFeature`

Add tests & make sure everything is running properly`bash $ npm test``

Commit & push, and make a pull request!

src="assets/ngx-logo.png" width="160" border="0" alt="NGX-PIPES">

Useful pipes for Angular with no external dependencies

#### Extras

TypeSerializer - Serializer / Deserializer, designed to make prettier code while using decorators.

Segal Decorators - Bunch of highly useful decorators, helps in writing a more concise code while improving readability

Installation

1. Use npm to install the package

``terminal $ npm install ngx-pipes --save`

`typescript import {NgPipesModule} from 'ngx-pipes'; @NgModule({ // ... imports: [ // ... NgPipesModule ] })`

3. Pipes are also injectable and can be used in Components / Services / etc..

`typescript import {ReversePipe} from 'ngx-pipes';

@Component({ // .. providers: [ReversePipe] }) export class AppComponent { constructor(private reversePipe: ReversePipe) { this.reversePipe.transform('foo'); // Returns: "oof" } // .. }`

4. You can also use pipes as part of your template for ex.

`html

{{ 'foo' | reverse }}


and it's also possible to stack multiple pipes

`html

{{ ' foo' | ltrim | reverse }}



Date
$3
Time ago pipe converts date to 'just now', 'X days ago', 'last week', 'X days ago', etc..

Usage: string | timeAgo`typescript import * as moment from 'moment';

const now = new Date();

// timeAgo also supports moment.js objects const lastWeek = moment().subtract(10, 'days');`

`html Updated: {{now | timeAgo}} Updated: {{lastWeek | timeAgo}}`

`String`

`$3`

Prefixes input string with "a" or "an".

Usage: string | aOrAn

`html This is a picture of {{imageDescription | aOrAn}}`

`$3`

Repeats a string n times

Usage: string | repeat: times: [separator|optional]

`html

{{ 'example' | repeat: 3: '@' }}

$3

Scans string and replace {i} placeholders by equivalent member of the array

Usage: string | scan: [ARRAY]

`html

{{'Hey {0}, {1}' | scan: ['foo', 'bar']}}


$3
Shortening a string by length and providing a custom string to denote an omission

Usage: string | shorten: length: [suffix|optional]: [wordBreak boolean|optional]

`html

{{'Hey foo bar' | shorten: 3: '...'}}


$3
Strips a HTML tags from string and providing which tags should not be removed

Usage: string | stripTags: [ARRAY]

`html

{{'foo

bar

' | stripTags }}
 
{{'foo 
bar
' | stripTags: 'p'}}


$3
Uppercase first letter of first word

`html

{{'foo bar' | ucfirst }}


$3
Uppercase first letter every word

`html

{{'foo bar' | ucwords }}

 
{{'shaquille o'neal' | ucwords }}


$3
Strips characters from the beginning and end of a string (default character is space).

Usage: string | trim: [characters|optional]

`html

{{' foo ' | trim }}

 
{{'foobarfoo' | trim: 'foo' }}


$3
Strips characters from the beginning of a string (default character is space).

Usage: string | ltrim: [characters|optional]

`html

{{' foo ' | ltrim }}

 
{{'foobarfoo' | ltrim: 'foo' }}


$3
Strips characters from the end of a string (default character is space).

Usage: string | rtrim: [characters|optional]

`html

{{' foo ' | rtrim }}

 
{{'foobarfoo' | rtrim: 'foo' }}


$3
Reverses a string

Usage: string | reverse

`html

{{'foo bar' | reverse }}


$3
Slugify a string (lower case and add dash between words).

Usage: string | slugify

`html

{{'Foo Bar' | slugify }}

 
{{'Some Text To Slugify' | slugify }}


$3
Camelize a string replaces dashes and underscores and converts to camelCase string.

Usage: string | camelize

`html

{{'foo_bar' | camelize }}

 
{{'some_dashed-with-underscore' | camelize }}
 
{{'-dash_first-' | camelize }}


$3
Removes accents from Latin characters.

Usage: string | latinise

`html

{{'Féé' | latinise }}

 
{{'foo' | latinise }}


$3
Converts a string with new lines into an array of each line.

Usage: string | lines

`html

{{'Some\nSentence with\r\nNew line' | lines }}


$3
Converts camelCase string to underscore.

Usage: string | underscore

`html

{{'angularIsAwesome' | underscore }}

 
{{'FooBar' | underscore }}


$3
Tests if a string matches a pattern.

Usage: string | test: {RegExp}: {Flags}

`html

{{'foo 42' | test: '[\\d]+$': 'g' }}

 
{{'42 foo' | test: '[\\d]+$': 'g' }}
 
{{'FOO' | test: '^foo': 'i' }}


$3
Returns array of matched elements in string.

Usage: string | match: {RegExp}: {Flags}

`html

{{'foo 42' | match: '[\\d]+$': 'g' }}

 
{{'42 foo' | match: '[\\d]+$': 'g' }}
 
{{'FOO' | match: '^foo': 'i' }}


$3
Left pad a string to a given length using a given pad character (default is a space)

Usage:string | lpad: length: [padCharacter:string|optional]

`html

{{'foo' | lpad: 5}}

 

{{String(3) | lpad: 5: '0'}}


$3
Right pad a string to a given length using a given pad character  (default is a space)

Usage:string | rpad: length: [padCharacter:string|optional]

`html

{{'Foo' | rpad: 5: '#'}}

$3

Make a singular string plural. Optional quantity argument specifies how many of the singular string there are.

Usage: string | makePluralString: [quantity:string|optional]

`html {{'Painting' | makePluralString}} {{'Painting' | makePluralString: 1}} {{'One Painting' | makePluralString: 1}} {{'Painting' | makePluralString: 4}} {{'Four Painting' | makePluralString: 4}}`

`$3`

Wrap a string between a prefix and a suffix

Usage:string | wrap: prefix: suffix

`html

{{'Foo' | wrap: 'nice prefix ': ' and awesome suffix!'}}


Array
$3
Returns array of diff between arrays

Usage: array | diff: [ARRAY]: [ARRAY]: ... : [ARRAY]

`typescript this.items = [1, 2, 3, 4];`

`html


$3
Flattens nested array, passing shallow will mean it will only be flattened a single level

Usage: array | flatten: [shallow|optional]

`typescript this.items = [1,2,3,[4,5,6,[7,8,9],[10,11,12,13,[14],[15],[16, [17]]]]];`

`html


$3
Slicing off the end of the array by n elements

Usage: array | initial: n

`typescript this.items = [first, second, third];`

`html


$3
Slicing off the start of the array by n elements

Usage: array | tail: n

`typescript this.items = [first, second, third];`

`html


$3
Returns the intersections of an arrays

Usage: array | intersection: [ARRAY]: [ARRAY]: ... : [ARRAY]

`typescript this.items = [1, 2, 3, 4, 5];`

`html


$3
Returns an array with range of numbers

Usage: range: [start: number, default = '1']: [count: number]: [step: number | optional, default = '1']

`typescript this.items = this.rangePipe.transform(1, 5); // Returns: [1, 2, 3, 4, 5]`

`html


$3
Reverses an array

Usage: array | reverse

`typescript this.items = [1, 2, 3];`

`html


$3
Removes un-truthy values from array

Usage: array | truthify

`typescript this.items = [null, 1, false, undefined, 2, 0, 3, NaN, 4, ''];`

`html


$3
Combine two arrays

Usage: array | union: [ARRAY]

`typescript this.items = [1, 2, 3];`

`html


$3
Removes duplicates from array

Usage: array | unique: 'Property (Optional)'

`typescript this.items = [1, 2, 3, 1, 2, 3];`

`html


$3
Returns array without specific elements

Usage: array | without: [ARRAY]

`typescript this.items = [1, 2, 3, 1, 2, 3];`

`html


$3
Returns array of properties values

Usage: array | pluck: propertyName

`typescript this.items = [ { a: 1, b: { c: 4 } }, { a: 2, b: { c: 5 } }, { a: 3, b: { c: 6 } }, ];`

`html


$3
Returns randomly shuffled array

Usage: array | shuffle

`typescript this.items = [1, 2, 3, 4, 5, 6];`

`html


$3
Returns true if every elements of the array fits the predicate otherwise false

Usage: array | every: predicate

`typescript this.itemsOne = [1, 1, 1]; this.itemsTwo = [1, 1, 2]; this.itemsThree = [2, 2, 2]; this.predicate = (value: any, index: number, array: any[]): boolean => { return value === 1; };`

`html

{{ itemsOne | every: predicate }}

 
{{ itemsTwo | every: predicate }}
 
{{ itemsThree | every: predicate }}


$3
Returns true if some elements of the array fits the predicate otherwise false

Usage: array | some: predicate

`typescript this.itemsOne = [1, 1, 1]; this.itemsTwo = [1, 1, 2]; this.itemsThree = [2, 2, 2]; this.predicate = (value: any, index: number, array: any[]): boolean => { return value === 1; };`

`html

{{ itemsOne | some: predicate }}

 
{{ itemsTwo | some: predicate }}
 
{{ itemsThree | some: predicate }}


$3
Returns sample items randomly from array

Usage: array | sample: [amount | default = 1]

`html

{{ [1, 2, 3, 4] | sample }}

 
{{ [1, 2, 3, 4] | sample: 2 }}


$3
Returns object of grouped by items by discriminator, and supports nested properties.

`typescript this.arrayObject = [ {id: 1, elm: 'foo', value: 0}, {id: 2, elm: 'bar', value: 1}, {id: 3, elm: 'foo', value: 2}, {id: 4, elm: 'foo', value: 2} ];

this.arrayNestedObject = [ {id: 1, prop: { deep: 'foo' }}, {id: 2, prop: { deep: 'bar' }}, {id: 3, prop: { deep: 'foo' }}, {id: 4, prop: { deep: 'bar' }} ];`

`html

{{ arrayObject | groupBy: 'elm' }}

 
{{ arrayObject | groupBy: ['elm', 'value'] }}
 
{{ arrayObject | groupBy: ['elm', 'value']: '_' }}
 
{{ arrayNestedObject | groupBy: 'prop.deep' }}


$3
Identical to groupBy pipe, the only difference is that it's an impure pipe.
Impure pipes: https://angular.io/guide/pipes#impure-pipes
$3
Returns object array of grouped by items by discriminator

Usage: array | filterBy: [prop, nested.prop, ...]: search: [strict | optional]

`html

{{ users | filterBy: ['id']: 1 }}

 

{{ users | filterBy: ['work.company']: 'Bar Tech' }}
 

{{ users | filterBy: ['arr.name']: 'foo' }}
 

{{ users | filterBy: ['first_name', 'last_name']: 'John' }}


{{ users | filterBy: ['first_name', 'last_name']: ['John', 'Cent'] }}


$3
Identical to filterBy pipe, the only difference is that it's an impure pipe.
Impure pipes: https://angular.io/guide/pipes#impure-pipes
$3
Returns ordered array by configuration

Usage: array | orderBy: [prop, nested.prop, array of props, ...]

`typescript const numbers = [2, 1, 3];

const obj = [ {id: 4, name: 'Dave', amount: 2}, {id: 2, name: 'Michael', amount: 2}, {id: 3, name: 'Dan', amount: 1}, {id: 1, name: 'John', amount: 1} ];

`html

{{ numbers | orderBy }}

  
{{ numbers | orderBy: '-' }}
  

{{ deepObj | orderBy: 'amount' }}
  

{{ deepObj | orderBy: '-amount' }}
  

{{ deepObj | orderBy: 'deep.prop' }}
  

{{ deepObj | orderBy: '-deep.prop' }}
  

{{ obj | orderBy: ['amount', 'id'] }}


$3
Identical to orderBy pipe, the only difference is that it's an impure pipe.
Impure pipes: https://angular.io/guide/pipes#impure-pipes
$3
Returns chunked array or string by size

Usage: array | size: [number | default = 1]

`html

{{ [1, 2, 3, 4, 5] | chunk: 2 }}


$3
Returns object of an array of key value pairs

Usage: array | fromPairs

`html

{{ [['foo', 1], ['bar', 2]] | fromPairs }}

 
{{ [['foo', [1, 2]], ['bar', [3, 4]]] | fromPairs }}


Object
$3
Returns array of object keys

Usage: object | keys

`html

{{ {foo: 1, bar: 2} | keys }}


$3
Returns array of object values

Usage: object | values

`html

{{ {foo: 1, bar: 2} | values }}


$3
Returns array of an object key value pairs

Usage: object | pairs

`html

{{ {foo: 1, bar: 2} | pairs }}

 
{{ {foo: [1, 2], bar: [3, 4]} | pairs }}


$3
Returns object with picked keys from object

Usage: object | pick: [key | string]]

`html

{{ {foo: 1, bar: 2} | pick: 'foo' }}

 
{{ {foo: 1, bar: 2} | pick: 'foo': 'bar' }}


$3
Returns object after omitting keys from object (opposite of pick)

Usage: object | omit: [key | string]]

`html

{{ {foo: 1, bar: 2} | omit: 'foo' }}

 
{{ {foo: 1, bar: 2} | omit: 'foo': 'bar' }}


$3
Returns object with inverted keys and values. in case of equal values, subsequent values overwrite property assignments of previous values.

Usage: object | invert

`html

{{ {foo: 1, bar: 2} | invert }}


$3
Returns object with inverted keys and values. in case of equal values, will add to an array.

Usage: object | invertBy: [Function | optional]

`typescript this.cb = (value): string => { returnname_${value}; };`

`html

{{ {foo: 1, bar: 2} | invertBy }}

 
{{ {foo: 1, bar: 2} | invertBy: cb }}
 
{{ {a: 1, b: 2, c: 1, d: 2} | invertBy }}


$3
Returns a diff object of two objects

Usage: object | diffObj: Object

`html

{{ {a: 1} | diffObj: {a: 1} }}

 
{{ {a: 1} | diffObj: {a: 2} }}
 
{{ {a: 1, b: 2} | diffObj: {a: 1, b: 1} }}
 
{{ {a: 1, b: 2, c: {d: 3} } | diffObj: {a: 1, b: 1, c: {d: 1} } }}


Math
$3
Returns the minimum of a given array

Usage: array | min

`html

{{ [1, 2, 3, 1, 2, 3] | min }}


$3
Returns the maximum of a given array

Usage: array | max

`html

{{ [1, 2, 3, 1, 2, 3] | max }}


$3
Returns the sum of a given array

Usage: array | sum

`html

{{ [1, 2, 3, 4] | sum }}


$3
Returns the average of a given array

Usage: array | average

`html

{{ [1, 2, 3] | average }}

 
{{ [1, 2] | average }}


$3
Returns percentage between numbers

Usage: number | percentage: [total | default = 100]: [floor | default = false]

`html

{{ 5 | percentage }}

 
{{ 5 | percentage: 160 }}
 
{{ 5 | percentage: 160: true }}


$3
Returns ceil of a number by precision

Usage: number | ceil: [precision | default = 0]

`html

{{ 42.123 | ceil }}

 
{{ 42.123 | ceil: 2 }}


$3
Returns floor of a number by precision

Usage: number | floor: [precision | default = 0]

`html

{{ 42.123 | floor }}

 
{{ 42.123 | floor: 2 }}


$3
Returns round of a number by precision

Usage: number | round: [precision | default = 0]

`html

{{ 42.4 | round }}

 
{{ 42.5 | round }}
 
{{ 42.123 | round: 2 }}


$3
Returns the square root of a number

Usage: number | sqrt

`html

{{ 9 | sqrt }}


$3
Returns the power of a number

Usage: number | pow: [power | default = 2]

`html

{{ 3 | pow }}

 
{{ 3 | pow: 3 }}


$3
Returns the degrees of a number in radians

Usage: number | degrees

`html

{{ 3.141592653589793 | degrees }}


$3
Returns the radians of a number in degrees

Usage: number | radians

`html

{{ 180 | radians }}


$3
Returns bytes with a unit symbol

Usage: number | bytes: [precision]

`html

{{ 10 | bytes }}

 
{{ 1048576 | bytes }}
 
{{ 1073741824 | bytes }}
 
{{ 1.0995116e12 | bytes }}


Boolean
$3

Usage: any | isNull

`html

{{ null | isNull }}

 
{{ 1 | isNull }}

$3

Usage: any | isDefined

`html

{{ 1 | isDefined }}

 
{{ undefined | isDefined }}

$3

Usage: any | isUndefined

`html

{{ 1 | isUndefined }}

 
{{ undefined | isUndefined }}

$3

Usage: any | isString

`html

{{ 1 | isString }}

 
{{ '' | isString }}

$3

Usage: any | isNumber

`typescript this.func = () => {}; this.num = 1;`

`html

{{ num | isNumber }}

 
{{ func | isNumber }}

$3

Usage: any | isArray

`typescript this.arr = [1, 2]; this.num = 1;`

`html

{{ num | isArray }}

 
{{ arr | isArray }}

$3

Usage: any | isObject

`typescript this.obj = {a: 1, b: 2}; this.num = 1;`

`html

{{ num | isObject }}

 
{{ obj | isObject }}

$3

Usage: number | isGreaterThan: otherNumber

`html

{{ 1 | isGreaterThan: 1 }}

 
{{ 1 | isGreaterThan: 2 }}
 
{{ 2 | isGreaterThan: 1 }}

$3

Usage: number | isGreaterEqualThan: otherNumber

`html

{{ 1 | isGreaterEqualThan: 1 }}

 
{{ 1 | isGreaterEqualThan: 2 }}
 
{{ 2 | isGreaterEqualThan: 1 }}

$3

Usage: number | isLessThan: otherNumber

`html

{{ 1 | isLessThan: 1 }}

 
{{ 1 | isLessThan: 2 }}
 
{{ 2 | isLessThan: 1 }}

$3

Usage: number | isLessEqualThan: otherNumber

`html

{{ 1 | isLessEqualThan: 1 }}

 
{{ 1 | isLessEqualThan: 2 }}
 
{{ 2 | isLessEqualThan: 1 }}

$3

Usage: number | isEqualTo: otherNumber

`html

{{ 1 | isEqualTo: 1 }}

 
{{ 1 | isEqualTo: '1' }}
 
{{ 1 | isEqualTo: 2 }}
 
{{ 2 | isEqualTo: 1 }}

$3

Usage: number | isNotEqualTo: otherNumber

`html

{{ 1 | isNotEqualTo: 1 }}

 
{{ 1 | isNotEqualTo: '1' }}
 
{{ 1 | isNotEqualTo: 2 }}
 
{{ 2 | isNotEqualTo: 1 }}

$3

Usage: number | isIdenticalTo: otherNumber

`html

{{ 1 | isIdenticalTo: 1 }}

 
{{ 1 | isIdenticalTo: '1' }}
 
{{ 1 | isIdenticalTo: 2 }}
 
{{ 2 | isIdenticalTo: 1 }}

$3

Usage: number | isNotIdenticalTo: otherNumber

`html

{{ 1 | isNotIdenticalTo: 1 }}

 
{{ 1 | isNotIdenticalTo: '1' }}
 
{{ 1 | isNotIdenticalTo: 2 }}
 
{{ 2 | isNotIdenticalTo: 1 }}


Contributing
* Before adding any new feature or a fix make sure to open an issue first!

Make sure you have angular-cli & karma installed globally.

`bash $ npm install -g angular-cli karma`

Clone the project, and install dependencies.

`bash $ git clone https://github.com/danrevah/ngx-pipes.git $ npm install`

Create a new branch

`bash $ git checkout -b feat/someFeature`

Add tests & make sure everything is running properly`bash $ npm test``

Commit & push, and make a pull request!

Table of contents

Installation

Date

$3

String

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

Array

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

Object

$3

$3

$3

$3

$3

$3

$3

$3

Math

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

Boolean

$3

$3

$3

`String`

`$3`

`$3`

`$3`

`String`

`$3`

`$3`

`$3`