ngx-pipes
Useful pipes for Angular with no external dependencies
TypeSerializer - Another library you might find interesting. Serializer / Deserializer, designed to make prettier code while using decorators (Can be used both with Angular or Node.js).
Table of contents
Installation
- Use npm to install the package
$ npm install ngx-pipes --save - You could either add into your module
importstheNgPipesModulein order to add all of the pipes, Or add a specific module such asNgArrayPipesModule,NgObjectPipesModule,NgStringPipesModule,NgMathPipesModuleorNgBooleanPipesModule.
; - Pipes are also injectable and can be used in Components / Services / etc..
; - You can also use pipes as part of your template for ex.
{{ 'foo' | reverse }} <!-- Output: "oof" -->and it's also possible to stack multiple pipes
{{ ' foo' | ltrim | reverse }} <!-- Output: "oof" -->String
a-or-an
Prefixes input string with "a" or "an".
Usage: string | a-or-an
This is a picture of {{imageDescription | a-or-an}}repeat
Repeats a string n times
Usage: string | repeat: times: [separator|optional]
{{ 'example' | repeat: 3: '@' }} <!-- Output: "example@example@example" -->scan
Scans string and replace {i} placeholders by equivalent member of the array
Usage: string | scan: [ARRAY]
{{'Hey {0}, {1}' | scan: ['foo', 'bar']}} <!-- Output: "Hey foo, bar" -->shorten
Shortening a string by length and providing a custom string to denote an omission
Usage: string | shorten: length: [suffix|optional]: [wordBreak boolean|optional]
{{'Hey foo bar' | shorten: 3: '...'}} <!-- Output: "Hey..." -->stripTags
Strips a HTML tags from string and providing which tags should not be removed
Usage: string | stripTags: [ARRAY]
{{'foo bar' | stripTags }} <!-- Output: "foo bar" -->{{'foo bar' | stripTags: 'p'}} <!-- Output: foo <p class="foo">bar</p> -->ucfirst
Uppercase first letter of first word
{{'foo bar' | ucfirst }} <!-- Output: "Foo bar" -->ucwords
Uppercase first letter every word
{{'foo bar' | ucwords }} <!-- Output: "Foo Bar" -->trim
Strips characters from the beginning and end of a string (default character is space).
Usage: string | trim: [characters|optional]
{{' foo ' | trim }} <!-- Output: "foo" -->{{'foobarfoo' | trim: 'foo' }} <!-- Output: "bar" -->ltrim
Strips characters from the beginning of a string (default character is space).
Usage: string | ltrim: [characters|optional]
{{' foo ' | ltrim }} <!-- Output: "foo " -->{{'foobarfoo' | ltrim: 'foo' }} <!-- Output: "barfoo" -->rtrim
Strips characters from the end of a string (default character is space).
Usage: string | rtrim: [characters|optional]
{{' foo ' | rtrim }} <!-- Output: " foo" -->{{'foobarfoo' | rtrim: 'foo' }} <!-- Output: "foobar" -->reverse
Reverses a string
Usage: string | reverse
{{'foo bar' | reverse }} <!-- Output: "rab oof" -->slugify
Slugify a string (lower case and add dash between words).
Usage: string | slugify
{{'Foo Bar' | slugify }} <!-- Output: "foo-bar" -->{{'Some Text To Slugify' | slugify }} <!-- Output: "some-text-to-slugify" -->camelize
Camelize a string replaces dashes and underscores and converts to camelCase string.
Usage: string | camelize
{{'foo_bar' | camelize }} <!-- Output: "fooBar" -->{{'some_dashed-with-underscore' | camelize }} <!-- Output: "someDashedWithUnderscore" -->{{'-dash_first-' | camelize }} <!-- Output: "dashFirst" -->latinise
Removes accents from Latin characters.
Usage: string | latinise
{{'Féé' | latinise }} <!-- Output: "Fee" -->{{'foo' | latinise }} <!-- Output: "foo" -->lines
Converts a string with new lines into an array of each line.
Usage: string | lines
{{'Some\nSentence with\r\nNew line' | lines }} <!-- Output: "['Some', 'Sentence with', 'New line']" -->underscore
Converts camelCase string to underscore.
Usage: string | underscore
{{'angularIsAwesome' | underscore }} <!-- Output: "angular_is_awesome" -->{{'FooBar' | underscore }} <!-- Output: "foo_bar" -->test
Tests if a string matches a pattern.
Usage: string | test: {RegExp}: {Flags}
{{'foo 42' | test: '[\\d]+$': 'g' }} <!-- Output: true -->{{'42 foo' | test: '[\\d]+$': 'g' }} <!-- Output: false -->{{'FOO' | test: '^foo': 'i' }} <!-- Output: true -->match
Returns array of matched elements in string.
Usage: string | match: {RegExp}: {Flags}
{{'foo 42' | match: '[\\d]+$': 'g' }} <!-- Output: '42' -->{{'42 foo' | match: '[\\d]+$': 'g' }} <!-- Output: null -->{{'FOO' | match: '^foo': 'i' }} <!-- Output: 'FOO' -->lpad
Left pad a string to a given length using a given pad character (default is a space)
Usage: string | lpad: length: [padCharacter:string|optional]
{{'foo' | lpad: 5}} <!-- Output: " foo" --><!-- Cast a number to string in order to left pad it with zeros -->{{String(3) | lpad: 5: '0'}} <!-- Output: "00003" -->rpad
Right pad a string to a given length using a given pad character (default is a space)
Usage: string | rpad: length: [padCharacter:string|optional]
{{'Foo' | rpad: 5: '#'}} <!-- Output: "Foo##" -->make-plural-string
Make a singular string plural. Optional quantity argument specifies how many of the singular string there are.
Usage: string | make-plural-string: [quantity:string|optional]
{{'Painting' | make-plural-string}} <!-- Output: "Paintings" -->{{'Painting' | make-plural-string: 1}} <!-- Output: "Painting" -->{{'One Painting' | make-plural-string: 1}} <!-- Output: "One Painting" -->{{'Painting' | make-plural-string: 4}} <!-- Output: "Paintings" -->{{'Four Painting' | make-plural-string: 4}} <!-- Output: "Four Paintings" -->wrap
Wrap a string between a prefix and a suffix
Usage: string | wrap: prefix: suffix
{{'Foo' | wrap: 'nice prefix ': ' and awesome suffix!'}} <!-- Output: "nice prefix Foo and awesome suffix!" -->Array
diff
Returns array of diff between arrays
Usage: array | diff: [ARRAY]: [ARRAY]: ... : [ARRAY]
this.items = ; <!-- Array: [3, 4] -->flatten
Flattens nested array, passing shallow will mean it will only be flattened a single level
Usage: array | flatten: [shallow|optional]
this.items = ; <!-- Array: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17] -->initial
Slicing off the end of the array by n elements
Usage: array | initial: n
this.items = ; <!-- Array: [first, second] -->tail
Slicing off the start of the array by n elements
Usage: array | tail: n
this.items = ; <!-- Array: [second, third] -->intersection
Returns the intersections of an arrays
Usage: array | intersection: [ARRAY]: [ARRAY]: ... : [ARRAY]
this.items = ; <!-- Array: [3] -->range
Returns an array with range of numbers
Usage: range: [start: number, default = '1']: [count: number]: [step: number | optional, default = '1']
this.items = this.rangePipe.transform1, 5; // Returns: [1, 2, 3, 4, 5] <!-- Array: [1, 2, 3, 4, 5] -->reverse
Reverses an array
Usage: array | reverse
this.items = ; <!-- Array: [3, 2, 1] -->truthify
Removes un-truthy values from array
Usage: array | truthify
this.items = ; <!-- Array: [1, 2, 3, 4] -->union
Combine two arrays
Usage: array | union: [ARRAY]
this.items = ; <!-- Array: [1, 2, 3, 4] -->unique
Removes duplicates from array
Usage: array | unique: 'Property (Optional)'
this.items = ; <!-- Array: [1, 2, 3] -->without
Returns array without specific elements
Usage: array | without: [ARRAY]
this.items = ; <!-- Array: [2, 2] -->pluck
Returns array of properties values
Usage: array | pluck: propertyName
this.items = ; <!-- Array: [1, 2, 3] --> <!-- Array: [4, 5, 6] -->shuffle
Returns randomly shuffled array
Usage: array | shuffle
this.items = ; <!-- Array: [4, 1, 6, 2, 5, 3] -->every
Returns true if every elements of the array fits the predicate otherwise false
Usage: array | every: predicate
this.itemsOne = ;this.itemsTwo = ;this.itemsThree = ;this.predicate =;{{ itemsOne | every: predicate }} <!-- Output: "true" -->{{ itemsTwo | every: predicate }} <!-- Output: "false" -->{{ itemsThree | every: predicate }} <!-- Output: "false" -->some
Returns true if some elements of the array fits the predicate otherwise false
Usage: array | some: predicate
this.itemsOne = ;this.itemsTwo = ;this.itemsThree = ;this.predicate =;{{ itemsOne | some: predicate }} <!-- Output: "true" -->{{ itemsTwo | some: predicate }} <!-- Output: "true" -->{{ itemsThree | some: predicate }} <!-- Output: "false" -->sample
Returns sample items randomly from array
Usage: array | sample: [amount | default = 1]
{{ [1, 2, 3, 4] | sample }} <!-- Output: "[2]" -->{{ [1, 2, 3, 4] | sample: 2 }} <!-- Output: "[4, 3]" -->groupBy
Returns object of grouped by items by discriminator, and supports nested properties.
Usage: array | groupBy: [string[] | string | Function]: [delimiter: string | optional, default = '|']
this.arrayObject = ; this.arrayNestedObject = ;{{ arrayObject | groupBy: 'elm' }} <!-- 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}]}" --> {{ arrayObject | groupBy: ['elm', 'value'] }} <!-- 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}]}" --> {{ arrayObject | groupBy: ['elm', 'value']: '_' }} <!-- 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}]}" --> {{ arrayNestedObject | groupBy: 'prop.deep' }} <!-- Output:{foo: [{id: 1, prop: {deep: foo}}, {id: 3, prop: {deep: foo}}], bar: [{id: 2, prop: {deep: bar}}, {id: 4, prop: {deep: bar}}]}" -->groupByImpure
Identical to groupBy pipe, the only difference is that it's an impure pipe.
Impure pipes: https://angular.io/guide/pipes#impure-pipes
filterBy
Returns object array of grouped by items by discriminator
Usage: array | filterBy: [prop, nested.prop, ...]: search: [strict | optional]
this.users = ;<!-- Returns users with `id` of 1 -->{{ users | filterBy: ['id']: 1 }} <!-- Output: "[{id: 1, first_name: 'John', last_name: 'Doe', work: { company: 'Foo Tech', previous_company: '' }}]" --> <!-- filterBy also support nested properties -->{{ users | filterBy: ['work.company']: 'Bar Tech' }} <!-- Output: "[{ "id": 3, "first_name": "Bruce", "last_name": "John", "work": { "company": "Bar Tech", "previous_company": "" } }]" --> <!-- filterBy also support nested properties inside of an array -->{{ users | filterBy: ['arr.name']: 'foo' }} <!-- Output: "[{id: 4, first_name: 'William', last_name: 'Cent', work: { company: 'Foo Tech' }, arr: [{name: 'foo'}]}]" --> <!-- Return users whose first name or last name is 'John'. -->{{ users | filterBy: ['first_name', 'last_name']: 'John' }}<!-- Output: "[{id: 1, first_name: 'John', last_name: 'Doe', work: { company: 'Foo Tech', previous_company: '' }}]" --> <!-- Return users whose first name or last name is 'John' or 'Cent'. -->{{ users | filterBy: ['first_name', 'last_name']: ['John', 'Cent'] }}<!-- 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'}]}]" -->filterByImpure
Identical to filterBy pipe, the only difference is that it's an impure pipe.
Impure pipes: https://angular.io/guide/pipes#impure-pipes
orderBy
Returns ordered array by configuration
Usage: array | orderBy: [prop, nested.prop, array of props, ...]
; ; ;<!-- Returns array ordered by value -->{{ numbers | orderBy }} <!-- Output: [1, 2, 3] -->{{ numbers | orderBy: '-' }} <!-- Output: [3, 2, 1] --> <!-- Returns array ordered by value of property -->{{ deepObj | orderBy: 'amount' }} <!-- Output: [{id: 3, ...}, {id: 4, ...}, {id: 2, ...}, {id: 1, ...}] -->{{ deepObj | orderBy: '-amount' }} <!-- Output: [{id: 1, ...}, {id: 2, ...}, {id: 4, ...}, {id: 3, ...}] --> <!-- Returns array ordered by value of deep property -->{{ deepObj | orderBy: 'deep.prop' }} <!-- Output: [{id: 3, ...}, {id: 2, ...}, {id: 4, ...}, {id: 1, ...}] -->{{ deepObj | orderBy: '-deep.prop' }} <!-- Output: [{id: 1, ...}, {id: 4, ...}, {id: 2, ...}, {id: 3, ...}] --> <!-- Returns array ordered by mutliple properties -->{{ obj | orderBy: ['amount', 'id'] }} <!-- Output: [{id: 1, ...}, {id: 3, ...}, {id: 2, ...}, {id: 4, ...}] -->orderByImpure
Identical to orderBy pipe, the only difference is that it's an impure pipe.
Impure pipes: https://angular.io/guide/pipes#impure-pipes
Object
keys
Returns array of object keys
Usage: object | keys
{{ {foo: 1, bar: 2} | keys }} <!-- Output: "['foo', 'bar']" -->values
Returns array of object values
Usage: object | values
{{ {foo: 1, bar: 2} | values }} <!-- Output: "[1, 2]" -->pairs
Returns array of an object key value pairs
Usage: object | pairs
{{ {foo: 1, bar: 2} | pairs }} <!-- Output: "[['foo', 1], ['bar', 2]]" -->{{ {foo: [1, 2], bar: [3, 4]} | pairs }} <!-- Output: "[['foo', [1, 2]], ['bar', [3, 4]]]" -->pick
Returns object with picked keys from object
Usage: object | pick: [key | string]]
{{ {foo: 1, bar: 2} | pick: 'foo' }} <!-- Output: "{foo: 1}" -->{{ {foo: 1, bar: 2} | pick: 'foo': 'bar' }} <!-- Output: "{foo: 1, bar: 2}" -->omit
Returns object after omitting keys from object (opposite of pick)
Usage: object | omit: [key | string]]
{{ {foo: 1, bar: 2} | omit: 'foo' }} <!-- Output: "{bar: 2}" -->{{ {foo: 1, bar: 2} | omit: 'foo': 'bar' }} <!-- Output: "{}" -->invert
Returns object with inverted keys and values. in case of equal values, subsequent values overwrite property assignments of previous values.
Usage: object | invert
{{ {foo: 1, bar: 2} | invert }} <!-- Output: "{1: 'foo', 2: 'bar'}" -->invertBy
Returns object with inverted keys and values. in case of equal values, will add to an array.
Usage: object | invertBy: [Function | optional]
this.cb =;{{ {foo: 1, bar: 2} | invertBy }} <!-- Output: "{1: ['foo'], 2: ['bar']}" -->{{ {foo: 1, bar: 2} | invertBy: cb }} <!-- Output: "{name_1: ['foo'], name_2: ['bar']}" -->{{ {a: 1, b: 2, c: 1, d: 2} | invertBy }} <!-- Output: "{1: ['a', 'c'], 2: ['b', 'd']}" -->diffObj
Returns a diff object of two objects
Usage: object | diffObj: Object
{{ {a: 1} | diffObj: {a: 1} }} <!-- Output: "{}" -->{{ {a: 1} | diffObj: {a: 2} }} <!-- Output: "{a: 1}" -->{{ {a: 1, b: 2} | diffObj: {a: 1, b: 1} }} <!-- Output: "{b: 2}" -->{{ {a: 1, b: 2, c: {d: 3} } | diffObj: {a: 1, b: 1, c: {d: 1} } }} <!-- Output: "{b: 2, c: {d: 3}}" -->Math
min
Returns the minimum of a given array
Usage: array | min
{{ [1, 2, 3, 1, 2, 3] | min }} <!-- Output: "1" -->max
Returns the maximum of a given array
Usage: array | max
{{ [1, 2, 3, 1, 2, 3] | max }} <!-- Output: "3" -->sum
Returns the sum of a given array
Usage: array | sum
{{ [1, 2, 3, 4] | sum }} <!-- Output: "10" -->percentage
Returns percentage between numbers
Usage: number | percentage: [total | default = 100]: [floor | default = false]
{{ 5 | percentage }} <!-- Output: "5" -->{{ 5 | percentage: 160 }} <!-- Output: "3.125" -->{{ 5 | percentage: 160: true }} <!-- Output: "3" -->ceil
Returns ceil of a number by precision
Usage: number | ceil: [precision | default = 0]
{{ 42.123 | ceil }} <!-- Output: "43" -->{{ 42.123 | ceil: 2 }} <!-- Output: "42.13" -->floor
Returns floor of a number by precision
Usage: number | floor: [precision | default = 0]
{{ 42.123 | floor }} <!-- Output: "42" -->{{ 42.123 | floor: 2 }} <!-- Output: "42.12" -->round
Returns round of a number by precision
Usage: number | round: [precision | default = 0]
{{ 42.4 | round }} <!-- Output: "42" -->{{ 42.5 | round }} <!-- Output: "43" -->{{ 42.123 | round: 2 }} <!-- Output: "42.12" -->sqrt
Returns the square root of a number
Usage: number | sqrt
{{ 9 | sqrt }} <!-- Output: "3" -->pow
Returns the power of a number
Usage: number | pow: [power | default = 2]
{{ 3 | pow }} <!-- Output: "9" -->{{ 3 | pow: 3 }} <!-- Output: "27" -->degrees
Returns the degrees of a number in radians
Usage: number | degrees
{{ 3.141592653589793 | degrees }} <!-- Output: "180" -->radians
Returns the radians of a number in degrees
Usage: number | radians
{{ 180 | radians }} <!-- Output: "3.141592653589793" -->bytes
Returns bytes with a unit symbol
Usage: number | bytes: [precision]
{{ 10 | bytes }} <!-- Output: "10 B" -->{{ 1048576 | bytes }} <!-- Output: "1 KB" -->{{ 1073741824 | bytes }} <!-- Output: "1 MB" -->{{ 1.0995116e12 | bytes }} <!-- Output: "1 GB" -->Boolean
isNull
Usage: any | isNull
{{ null | isNull }} <!-- Output: "true" -->{{ 1 | isNull }} <!-- Output: "false" -->isDefined
Usage: any | isDefined
{{ 1 | isDefined }} <!-- Output: "true" -->{{ undefined | isDefined }} <!-- Output: "false" -->isUndefined
Usage: any | isUndefined
{{ 1 | isUndefined }} <!-- Output: "false" -->{{ undefined | isUndefined }} <!-- Output: "true" -->isString
Usage: any | isString
{{ 1 | isString }} <!-- Output: "false" -->{{ '' | isString }} <!-- Output: "true" -->isNumber
Usage: any | isNumber
this.func =;this.num = 1;{{ num | isNumber }} <!-- Output: "true" -->{{ func | isNumber }} <!-- Output: "false" -->isArray
Usage: any | isArray
this.arr = ;this.num = 1;{{ num | isArray }} <!-- Output: "false" -->{{ arr | isArray }} <!-- Output: "true" -->isObject
Usage: any | isObject
this.obj =;this.num = 1;{{ num | isObject }} <!-- Output: "false" -->{{ obj | isObject }} <!-- Output: "true" -->isGreaterThan
Usage: number | isGreaterThan: otherNumber
{{ 1 | isGreaterThan: 1 }} <!-- Output: "false" -->{{ 1 | isGreaterThan: 2 }} <!-- Output: "false" -->{{ 2 | isGreaterThan: 1 }} <!-- Output: "true" -->isGreaterEqualThan
Usage: number | isGreaterEqualThan: otherNumber
{{ 1 | isGreaterEqualThan: 1 }} <!-- Output: "true" -->{{ 1 | isGreaterEqualThan: 2 }} <!-- Output: "false" -->{{ 2 | isGreaterEqualThan: 1 }} <!-- Output: "true" -->isLessThan
Usage: number | isLessThan: otherNumber
{{ 1 | isLessThan: 1 }} <!-- Output: "false" -->{{ 1 | isLessThan: 2 }} <!-- Output: "true" -->{{ 2 | isLessThan: 1 }} <!-- Output: "false" -->isLessEqualThan
Usage: number | isLessEqualThan: otherNumber
{{ 1 | isLessEqualThan: 1 }} <!-- Output: "true" -->{{ 1 | isLessEqualThan: 2 }} <!-- Output: "true" -->{{ 2 | isLessEqualThan: 1 }} <!-- Output: "false" -->isEqualTo
Usage: number | isEqualTo: otherNumber
{{ 1 | isEqualTo: 1 }} <!-- Output: "true" -->{{ 1 | isEqualTo: '1' }} <!-- Output: "true" -->{{ 1 | isEqualTo: 2 }} <!-- Output: "false" -->{{ 2 | isEqualTo: 1 }} <!-- Output: "false" -->isNotEqualTo
Usage: number | isNotEqualTo: otherNumber
{{ 1 | isNotEqualTo: 1 }} <!-- Output: "false" -->{{ 1 | isNotEqualTo: '1' }} <!-- Output: "false" -->{{ 1 | isNotEqualTo: 2 }} <!-- Output: "true" -->{{ 2 | isNotEqualTo: 1 }} <!-- Output: "true" -->isIdenticalTo
Usage: number | isIdenticalTo: otherNumber
{{ 1 | isIdenticalTo: 1 }} <!-- Output: "true" -->{{ 1 | isIdenticalTo: '1' }} <!-- Output: "false" -->{{ 1 | isIdenticalTo: 2 }} <!-- Output: "false" -->{{ 2 | isIdenticalTo: 1 }} <!-- Output: "false" -->isNotIdenticalTo
Usage: number | isNotIdenticalTo: otherNumber
{{ 1 | isNotIdenticalTo: 1 }} <!-- Output: "false" -->{{ 1 | isNotIdenticalTo: '1' }} <!-- Output: "true" -->{{ 1 | isNotIdenticalTo: 2 }} <!-- Output: "true" -->{{ 2 | isNotIdenticalTo: 1 }} <!-- Output: "true" -->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.
$ npm install -g angular-cli karmaClone the project, and install dependencies.
$ git clone https://github.com/danrevah/ngx-pipes.git$ npm installCreate a new branch
$ git checkout -b feat/someFeatureAdd tests & make sure everything is running properly
$ npm testCommit & push, and make a pull request!
install
weekly downloads
8,392
