Package Exports
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ngx-pipes) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
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
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,NgMathPipesModule,NgDatePipesModuleorNgBooleanPipesModule.
import {NgPipesModule} from 'ngx-pipes';
@NgModule({
// ...
imports: [
// ...
NgPipesModule
]
})- Pipes are also injectable and can be used in Components / Services / etc..
import {ReversePipe} from 'ngx-pipes';
@Component({
// ..
providers: [ReversePipe]
})
export class AppComponent {
constructor(private reversePipe: ReversePipe) {
this.reversePipe.transform('foo'); // Returns: "oof"
}
// ..
}- You can also use pipes as part of your template for ex.
<p>{{ 'foo' | reverse }}</p> <!-- Output: "oof" -->and it's also possible to stack multiple pipes
<p>{{ ' foo' | ltrim | reverse }}</p> <!-- Output: "oof" -->Date
timeAgo
Time ago pipe converts date to 'just now', 'X days ago', 'last week', 'X days ago', etc..
Usage: string | timeAgo
import * as moment from 'moment';
const now = new Date();
// timeAgo also supports moment.js objects
const lastWeek = moment().subtract(10, 'days');<span>Updated: {{now | timeAgo}}</span> <!-- Output: "just now" -->
<span>Updated: {{lastWeek | timeAgo}}</span> <!-- Output: "last week" -->String
aOrAn
Prefixes input string with "a" or "an".
Usage: string | aOrAn
<span>This is a picture of {{imageDescription | aOrAn}}</span>repeat
Repeats a string n times
Usage: string | repeat: times: [separator|optional]
<p>{{ 'example' | repeat: 3: '@' }}</p> <!-- Output: "example@example@example" -->scan
Scans string and replace {i} placeholders by equivalent member of the array
Usage: string | scan: [ARRAY]
<p>{{'Hey {0}, {1}' | scan: ['foo', 'bar']}}</p> <!-- 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]
<p>{{'Hey foo bar' | shorten: 3: '...'}}</p> <!-- Output: "Hey..." -->stripTags
Strips a HTML tags from string and providing which tags should not be removed
Usage: string | stripTags: [ARRAY]
<p>{{'<a href="">foo</a> <p class="foo">bar</p>' | stripTags }}</p> <!-- Output: "foo bar" -->
<p>{{'<a href="">foo</a> <p class="foo">bar</p>' | stripTags: 'p'}}</p> <!-- Output: foo <p class="foo">bar</p> -->ucfirst
Uppercase first letter of first word
<p>{{'foo bar' | ucfirst }}</p> <!-- Output: "Foo bar" -->ucwords
Uppercase first letter every word
<p>{{'foo bar' | ucwords }}</p> <!-- Output: "Foo Bar" -->
<p>{{'shaquille o'neal' | ucwords }}</p> <!-- Output: "Shaquille O'Neal" -->trim
Strips characters from the beginning and end of a string (default character is space).
Usage: string | trim: [characters|optional]
<p>{{' foo ' | trim }}</p> <!-- Output: "foo" -->
<p>{{'foobarfoo' | trim: 'foo' }}</p> <!-- Output: "bar" -->ltrim
Strips characters from the beginning of a string (default character is space).
Usage: string | ltrim: [characters|optional]
<p>{{' foo ' | ltrim }}</p> <!-- Output: "foo " -->
<p>{{'foobarfoo' | ltrim: 'foo' }}</p> <!-- Output: "barfoo" -->rtrim
Strips characters from the end of a string (default character is space).
Usage: string | rtrim: [characters|optional]
<p>{{' foo ' | rtrim }}</p> <!-- Output: " foo" -->
<p>{{'foobarfoo' | rtrim: 'foo' }}</p> <!-- Output: "foobar" -->reverse
Reverses a string
Usage: string | reverse
<p>{{'foo bar' | reverse }}</p> <!-- Output: "rab oof" -->slugify
Slugify a string (lower case and add dash between words).
Usage: string | slugify
<p>{{'Foo Bar' | slugify }}</p> <!-- Output: "foo-bar" -->
<p>{{'Some Text To Slugify' | slugify }}</p> <!-- Output: "some-text-to-slugify" -->camelize
Camelize a string replaces dashes and underscores and converts to camelCase string.
Usage: string | camelize
<p>{{'foo_bar' | camelize }}</p> <!-- Output: "fooBar" -->
<p>{{'some_dashed-with-underscore' | camelize }}</p> <!-- Output: "someDashedWithUnderscore" -->
<p>{{'-dash_first-' | camelize }}</p> <!-- Output: "dashFirst" -->latinise
Removes accents from Latin characters.
Usage: string | latinise
<p>{{'Féé' | latinise }}</p> <!-- Output: "Fee" -->
<p>{{'foo' | latinise }}</p> <!-- Output: "foo" -->lines
Converts a string with new lines into an array of each line.
Usage: string | lines
<p>{{'Some\nSentence with\r\nNew line' | lines }}</p> <!-- Output: "['Some', 'Sentence with', 'New line']" -->underscore
Converts camelCase string to underscore.
Usage: string | underscore
<p>{{'angularIsAwesome' | underscore }}</p> <!-- Output: "angular_is_awesome" -->
<p>{{'FooBar' | underscore }}</p> <!-- Output: "foo_bar" -->test
Tests if a string matches a pattern.
Usage: string | test: {RegExp}: {Flags}
<p>{{'foo 42' | test: '[\\d]+$': 'g' }}</p> <!-- Output: true -->
<p>{{'42 foo' | test: '[\\d]+$': 'g' }}</p> <!-- Output: false -->
<p>{{'FOO' | test: '^foo': 'i' }}</p> <!-- Output: true -->match
Returns array of matched elements in string.
Usage: string | match: {RegExp}: {Flags}
<p>{{'foo 42' | match: '[\\d]+$': 'g' }}</p> <!-- Output: '42' -->
<p>{{'42 foo' | match: '[\\d]+$': 'g' }}</p> <!-- Output: null -->
<p>{{'FOO' | match: '^foo': 'i' }}</p> <!-- 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]
<p>{{'foo' | lpad: 5}}</p> <!-- Output: " foo" -->
<!-- Cast a number to string in order to left pad it with zeros -->
<p>{{String(3) | lpad: 5: '0'}}</p> <!-- 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]
<p>{{'Foo' | rpad: 5: '#'}}</p> <!-- Output: "Foo##" -->makePluralString
Make a singular string plural. Optional quantity argument specifies how many of the singular string there are.
Usage: string | makePluralString: [quantity:string|optional]
<span>{{'Painting' | makePluralString}}</span> <!-- Output: "Paintings" -->
<span>{{'Painting' | makePluralString: 1}}</span> <!-- Output: "Painting" -->
<span>{{'One Painting' | makePluralString: 1}}</span> <!-- Output: "One Painting" -->
<span>{{'Painting' | makePluralString: 4}}</span> <!-- Output: "Paintings" -->
<span>{{'Four Painting' | makePluralString: 4}}</span> <!-- Output: "Four Paintings" -->wrap
Wrap a string between a prefix and a suffix
Usage: string | wrap: prefix: suffix
<p>{{'Foo' | wrap: 'nice prefix ': ' and awesome suffix!'}}</p> <!-- Output: "nice prefix Foo and awesome suffix!" -->Array
diff
Returns array of diff between arrays
Usage: array | diff: [ARRAY]: [ARRAY]: ... : [ARRAY]
this.items = [1, 2, 3, 4];<li *ngFor="let item of items | diff: [1, 2]"> <!-- 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 = [1,2,3,[4,5,6,[7,8,9],[10,11,12,13,[14],[15],[16, [17]]]]];<li *ngFor="let item of items | flatten">
<!-- 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 = [first, second, third];<li *ngFor="let item of items | initial: 1"> <!-- Array: [first, second] -->tail
Slicing off the start of the array by n elements
Usage: array | tail: n
this.items = [first, second, third];<li *ngFor="let item of items | tail: 1"> <!-- Array: [second, third] -->intersection
Returns the intersections of an arrays
Usage: array | intersection: [ARRAY]: [ARRAY]: ... : [ARRAY]
this.items = [1, 2, 3, 4, 5];<li *ngFor="let item of items | intersection: [1, 2, 3]: [3, 6]"> <!-- 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.transform(1, 5); // Returns: [1, 2, 3, 4, 5]<li *ngFor="let item of items"> <!-- Array: [1, 2, 3, 4, 5] -->reverse
Reverses an array
Usage: array | reverse
this.items = [1, 2, 3];<li *ngFor="let item of items | reverse"> <!-- Array: [3, 2, 1] -->truthify
Removes un-truthy values from array
Usage: array | truthify
this.items = [null, 1, false, undefined, 2, 0, 3, NaN, 4, ''];<li *ngFor="let item of items | truthify"> <!-- Array: [1, 2, 3, 4] -->union
Combine two arrays
Usage: array | union: [ARRAY]
this.items = [1, 2, 3];<li *ngFor="let item of items | union: [[4]]"> <!-- Array: [1, 2, 3, 4] -->unique
Removes duplicates from array
Usage: array | unique: 'Property (Optional)'
this.items = [1, 2, 3, 1, 2, 3];<li *ngFor="let item of items | unique"> <!-- Array: [1, 2, 3] -->without
Returns array without specific elements
Usage: array | without: [ARRAY]
this.items = [1, 2, 3, 1, 2, 3];<li *ngFor="let item of items | without: [1,3]"> <!-- Array: [2, 2] -->pluck
Returns array of properties values
Usage: array | pluck: propertyName
this.items = [
{
a: 1,
b: {
c: 4
}
},
{
a: 2,
b: {
c: 5
}
},
{
a: 3,
b: {
c: 6
}
},
];<li *ngFor="let item of items | pluck: 'a'"> <!-- Array: [1, 2, 3] -->
<li *ngFor="let item of items | pluck: 'b.c'"> <!-- Array: [4, 5, 6] -->shuffle
Returns randomly shuffled array
Usage: array | shuffle
this.items = [1, 2, 3, 4, 5, 6];<li *ngFor="let item of items | shuffle"> <!-- 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 = [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;
};<p>{{ itemsOne | every: predicate }}</p> <!-- Output: "true" -->
<p>{{ itemsTwo | every: predicate }}</p> <!-- Output: "false" -->
<p>{{ itemsThree | every: predicate }}</p> <!-- Output: "false" -->some
Returns true if some elements of the array fits the predicate otherwise false
Usage: array | some: predicate
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;
};<p>{{ itemsOne | some: predicate }}</p> <!-- Output: "true" -->
<p>{{ itemsTwo | some: predicate }}</p> <!-- Output: "true" -->
<p>{{ itemsThree | some: predicate }}</p> <!-- Output: "false" -->sample
Returns sample items randomly from array
Usage: array | sample: [amount | default = 1]
<p>{{ [1, 2, 3, 4] | sample }}</p> <!-- Output: "[2]" -->
<p>{{ [1, 2, 3, 4] | sample: 2 }}</p> <!-- 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 = [
{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' }}
];<p>{{ arrayObject | groupBy: 'elm' }}</p>
<!-- 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}]}" -->
<p>{{ arrayObject | groupBy: ['elm', 'value'] }}</p>
<!-- 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}]}" -->
<p>{{ arrayObject | groupBy: ['elm', 'value']: '_' }}</p>
<!-- 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}]}" -->
<p>{{ arrayNestedObject | groupBy: 'prop.deep' }}</p>
<!-- 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 = [
{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'}]}
];<!-- Returns users with `id` of 1 -->
<p>{{ users | filterBy: ['id']: 1 }}</p>
<!-- Output: "[{id: 1, first_name: 'John', last_name: 'Doe', work: { company: 'Foo Tech', previous_company: '' }}]" -->
<!-- filterBy also support nested properties -->
<p>{{ users | filterBy: ['work.company']: 'Bar Tech' }}</p>
<!-- Output: "[{ "id": 3, "first_name": "Bruce", "last_name": "John", "work": { "company": "Bar Tech", "previous_company": "" } }]" -->
<!-- filterBy also support nested properties inside of an array -->
<p>{{ users | filterBy: ['arr.name']: 'foo' }}</p>
<!-- 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'. -->
<p>{{ users | filterBy: ['first_name', 'last_name']: 'John' }}</p>
<!-- 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'. -->
<p>{{ users | filterBy: ['first_name', 'last_name']: ['John', 'Cent'] }}</p>
<!-- 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, ...]
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}}
];<!-- Returns array ordered by value -->
<p>{{ numbers | orderBy }}</p> <!-- Output: [1, 2, 3] -->
<p>{{ numbers | orderBy: '-' }}</p> <!-- Output: [3, 2, 1] -->
<!-- Returns array ordered by value of property -->
<p>{{ deepObj | orderBy: 'amount' }}</p>
<!-- Output: [{id: 3, ...}, {id: 4, ...}, {id: 2, ...}, {id: 1, ...}] -->
<p>{{ deepObj | orderBy: '-amount' }}</p>
<!-- Output: [{id: 1, ...}, {id: 2, ...}, {id: 4, ...}, {id: 3, ...}] -->
<!-- Returns array ordered by value of deep property -->
<p>{{ deepObj | orderBy: 'deep.prop' }}</p>
<!-- Output: [{id: 3, ...}, {id: 2, ...}, {id: 4, ...}, {id: 1, ...}] -->
<p>{{ deepObj | orderBy: '-deep.prop' }}</p>
<!-- Output: [{id: 1, ...}, {id: 4, ...}, {id: 2, ...}, {id: 3, ...}] -->
<!-- Returns array ordered by mutliple properties -->
<p>{{ obj | orderBy: ['amount', 'id'] }}</p>
<!-- 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
chunk
Returns chunked array or string by size
Usage: array | size: [number | default = 1]
<p>{{ [1, 2, 3, 4, 5] | chunk: 2 }}</p>
<!-- Output: "[[1, 2], [3, 4], [5]]" -->fromPairs
Returns object of an array of key value pairs
Usage: array | fromPairs
<p>{{ [['foo', 1], ['bar', 2]] | fromPairs }}</p> <!-- Output: "{foo: 1, bar: 2}" -->
<p>{{ [['foo', [1, 2]], ['bar', [3, 4]]] | fromPairs }}</p> <!-- Output: "{foo: [1, 2], bar: [3, 4]}" -->Object
keys
Returns array of object keys
Usage: object | keys
<p>{{ {foo: 1, bar: 2} | keys }}</p> <!-- Output: "['foo', 'bar']" -->values
Returns array of object values
Usage: object | values
<p>{{ {foo: 1, bar: 2} | values }}</p> <!-- Output: "[1, 2]" -->pairs
Returns array of an object key value pairs
Usage: object | pairs
<p>{{ {foo: 1, bar: 2} | pairs }}</p> <!-- Output: "[['foo', 1], ['bar', 2]]" -->
<p>{{ {foo: [1, 2], bar: [3, 4]} | pairs }}</p> <!-- Output: "[['foo', [1, 2]], ['bar', [3, 4]]]" -->pick
Returns object with picked keys from object
Usage: object | pick: [key | string]]
<p>{{ {foo: 1, bar: 2} | pick: 'foo' }}</p> <!-- Output: "{foo: 1}" -->
<p>{{ {foo: 1, bar: 2} | pick: 'foo': 'bar' }}</p> <!-- Output: "{foo: 1, bar: 2}" -->omit
Returns object after omitting keys from object (opposite of pick)
Usage: object | omit: [key | string]]
<p>{{ {foo: 1, bar: 2} | omit: 'foo' }}</p> <!-- Output: "{bar: 2}" -->
<p>{{ {foo: 1, bar: 2} | omit: 'foo': 'bar' }}</p> <!-- 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
<p>{{ {foo: 1, bar: 2} | invert }}</p> <!-- 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 = (value): string => {
return `name_${value}`;
};<p>{{ {foo: 1, bar: 2} | invertBy }}</p> <!-- Output: "{1: ['foo'], 2: ['bar']}" -->
<p>{{ {foo: 1, bar: 2} | invertBy: cb }}</p> <!-- Output: "{name_1: ['foo'], name_2: ['bar']}" -->
<p>{{ {a: 1, b: 2, c: 1, d: 2} | invertBy }}</p> <!-- Output: "{1: ['a', 'c'], 2: ['b', 'd']}" -->diffObj
Returns a diff object of two objects
Usage: object | diffObj: Object
<p>{{ {a: 1} | diffObj: {a: 1} }}</p> <!-- Output: "{}" -->
<p>{{ {a: 1} | diffObj: {a: 2} }}</p> <!-- Output: "{a: 1}" -->
<p>{{ {a: 1, b: 2} | diffObj: {a: 1, b: 1} }}</p> <!-- Output: "{b: 2}" -->
<p>{{ {a: 1, b: 2, c: {d: 3} } | diffObj: {a: 1, b: 1, c: {d: 1} } }}</p> <!-- Output: "{b: 2, c: {d: 3}}" -->Math
min
Returns the minimum of a given array
Usage: array | min
<p>{{ [1, 2, 3, 1, 2, 3] | min }}</p> <!-- Output: "1" -->max
Returns the maximum of a given array
Usage: array | max
<p>{{ [1, 2, 3, 1, 2, 3] | max }}</p> <!-- Output: "3" -->sum
Returns the sum of a given array
Usage: array | sum
<p>{{ [1, 2, 3, 4] | sum }}</p> <!-- Output: "10" -->average
Returns the average of a given array
Usage: array | average
<p>{{ [1, 2, 3] | average }}</p> <!-- Output: "2" -->
<p>{{ [1, 2] | average }}</p> <!-- Output: "1.5" -->percentage
Returns percentage between numbers
Usage: number | percentage: [total | default = 100]: [floor | default = false]
<p>{{ 5 | percentage }}</p> <!-- Output: "5" -->
<p>{{ 5 | percentage: 160 }}</p> <!-- Output: "3.125" -->
<p>{{ 5 | percentage: 160: true }}</p> <!-- Output: "3" -->ceil
Returns ceil of a number by precision
Usage: number | ceil: [precision | default = 0]
<p>{{ 42.123 | ceil }}</p> <!-- Output: "43" -->
<p>{{ 42.123 | ceil: 2 }}</p> <!-- Output: "42.13" -->floor
Returns floor of a number by precision
Usage: number | floor: [precision | default = 0]
<p>{{ 42.123 | floor }}</p> <!-- Output: "42" -->
<p>{{ 42.123 | floor: 2 }}</p> <!-- Output: "42.12" -->round
Returns round of a number by precision
Usage: number | round: [precision | default = 0]
<p>{{ 42.4 | round }}</p> <!-- Output: "42" -->
<p>{{ 42.5 | round }}</p> <!-- Output: "43" -->
<p>{{ 42.123 | round: 2 }}</p> <!-- Output: "42.12" -->sqrt
Returns the square root of a number
Usage: number | sqrt
<p>{{ 9 | sqrt }}</p> <!-- Output: "3" -->pow
Returns the power of a number
Usage: number | pow: [power | default = 2]
<p>{{ 3 | pow }}</p> <!-- Output: "9" -->
<p>{{ 3 | pow: 3 }}</p> <!-- Output: "27" -->degrees
Returns the degrees of a number in radians
Usage: number | degrees
<p>{{ 3.141592653589793 | degrees }}</p> <!-- Output: "180" -->radians
Returns the radians of a number in degrees
Usage: number | radians
<p>{{ 180 | radians }}</p> <!-- Output: "3.141592653589793" -->bytes
Returns bytes with a unit symbol
Usage: number | bytes: [precision]
<p>{{ 10 | bytes }}</p> <!-- Output: "10 B" -->
<p>{{ 1048576 | bytes }}</p> <!-- Output: "1 KB" -->
<p>{{ 1073741824 | bytes }}</p> <!-- Output: "1 MB" -->
<p>{{ 1.0995116e12 | bytes }}</p> <!-- Output: "1 GB" -->Boolean
isNull
Usage: any | isNull
<p>{{ null | isNull }}</p> <!-- Output: "true" -->
<p>{{ 1 | isNull }}</p> <!-- Output: "false" -->isDefined
Usage: any | isDefined
<p>{{ 1 | isDefined }}</p> <!-- Output: "true" -->
<p>{{ undefined | isDefined }}</p> <!-- Output: "false" -->isUndefined
Usage: any | isUndefined
<p>{{ 1 | isUndefined }}</p> <!-- Output: "false" -->
<p>{{ undefined | isUndefined }}</p> <!-- Output: "true" -->isString
Usage: any | isString
<p>{{ 1 | isString }}</p> <!-- Output: "false" -->
<p>{{ '' | isString }}</p> <!-- Output: "true" -->isNumber
Usage: any | isNumber
this.func = () => {};
this.num = 1;<p>{{ num | isNumber }}</p> <!-- Output: "true" -->
<p>{{ func | isNumber }}</p> <!-- Output: "false" -->isArray
Usage: any | isArray
this.arr = [1, 2];
this.num = 1;<p>{{ num | isArray }}</p> <!-- Output: "false" -->
<p>{{ arr | isArray }}</p> <!-- Output: "true" -->isObject
Usage: any | isObject
this.obj = {a: 1, b: 2};
this.num = 1;<p>{{ num | isObject }}</p> <!-- Output: "false" -->
<p>{{ obj | isObject }}</p> <!-- Output: "true" -->isGreaterThan
Usage: number | isGreaterThan: otherNumber
<p>{{ 1 | isGreaterThan: 1 }}</p> <!-- Output: "false" -->
<p>{{ 1 | isGreaterThan: 2 }}</p> <!-- Output: "false" -->
<p>{{ 2 | isGreaterThan: 1 }}</p> <!-- Output: "true" -->isGreaterEqualThan
Usage: number | isGreaterEqualThan: otherNumber
<p>{{ 1 | isGreaterEqualThan: 1 }}</p> <!-- Output: "true" -->
<p>{{ 1 | isGreaterEqualThan: 2 }}</p> <!-- Output: "false" -->
<p>{{ 2 | isGreaterEqualThan: 1 }}</p> <!-- Output: "true" -->isLessThan
Usage: number | isLessThan: otherNumber
<p>{{ 1 | isLessThan: 1 }}</p> <!-- Output: "false" -->
<p>{{ 1 | isLessThan: 2 }}</p> <!-- Output: "true" -->
<p>{{ 2 | isLessThan: 1 }}</p> <!-- Output: "false" -->isLessEqualThan
Usage: number | isLessEqualThan: otherNumber
<p>{{ 1 | isLessEqualThan: 1 }}</p> <!-- Output: "true" -->
<p>{{ 1 | isLessEqualThan: 2 }}</p> <!-- Output: "true" -->
<p>{{ 2 | isLessEqualThan: 1 }}</p> <!-- Output: "false" -->isEqualTo
Usage: number | isEqualTo: otherNumber
<p>{{ 1 | isEqualTo: 1 }}</p> <!-- Output: "true" -->
<p>{{ 1 | isEqualTo: '1' }}</p> <!-- Output: "true" -->
<p>{{ 1 | isEqualTo: 2 }}</p> <!-- Output: "false" -->
<p>{{ 2 | isEqualTo: 1 }}</p> <!-- Output: "false" -->isNotEqualTo
Usage: number | isNotEqualTo: otherNumber
<p>{{ 1 | isNotEqualTo: 1 }}</p> <!-- Output: "false" -->
<p>{{ 1 | isNotEqualTo: '1' }}</p> <!-- Output: "false" -->
<p>{{ 1 | isNotEqualTo: 2 }}</p> <!-- Output: "true" -->
<p>{{ 2 | isNotEqualTo: 1 }}</p> <!-- Output: "true" -->isIdenticalTo
Usage: number | isIdenticalTo: otherNumber
<p>{{ 1 | isIdenticalTo: 1 }}</p> <!-- Output: "true" -->
<p>{{ 1 | isIdenticalTo: '1' }}</p> <!-- Output: "false" -->
<p>{{ 1 | isIdenticalTo: 2 }}</p> <!-- Output: "false" -->
<p>{{ 2 | isIdenticalTo: 1 }}</p> <!-- Output: "false" -->isNotIdenticalTo
Usage: number | isNotIdenticalTo: otherNumber
<p>{{ 1 | isNotIdenticalTo: 1 }}</p> <!-- Output: "false" -->
<p>{{ 1 | isNotIdenticalTo: '1' }}</p> <!-- Output: "true" -->
<p>{{ 1 | isNotIdenticalTo: 2 }}</p> <!-- Output: "true" -->
<p>{{ 2 | isNotIdenticalTo: 1 }}</p> <!-- 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!