NOTICE: This package is now maintained under the Angular Compatibility Maintenance Initiative
This package has been included in the Angular Compatibility Maintenance Initiative to ensure it remains compatible with the latest versions of Angular, despite not receiving active feature development or bug fixes. This initiative is a community-driven effort to maintain libraries that are critical for Angular projects but are no longer actively developed.
Important Considerations:
- Maintenance Scope: Updates will focus solely on Angular version compatibility. No new features will be added, and existing bugs will not be addressed outside of compatibility concerns.
- Temporary Solution: This maintenance effort is intended as a temporary measure. Users are strongly encouraged to plan for the migration to actively supported alternatives as they become available.
- Contribution: If you are interested in contributing to the maintenance of this package or others within the initiative.
By using this package, you acknowledge the limitations of its maintenance under the Angular Compatibility Maintenance Initiative and the recommendation to seek more permanent solutions.
Package Name: @ngx-maintenance/ngx-pipes
Useful pipes for Angular with no external dependencies
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
- Use npm to install the package
$ npm install @ngx-maintenance/ngx-pipes --save
- You could either add into your module
imports
theNgPipesModule
in order to add all of the pipes, Or add a specific module such asNgArrayPipesModule
,NgObjectPipesModule
,NgStringPipesModule
,NgMathPipesModule
,NgDatePipesModule
orNgBooleanPipesModule
.
import {NgPipesModule} from '@ngx-maintenance/ngx-pipes';
@NgModule({
// ...
imports: [
// ...
NgPipesModule
]
})
- Pipes are also injectable and can be used in Components / Services / etc..
import {ReversePipe} from '@ngx-maintenance/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" -->
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" -->
Prefixes input string with "a" or "an".
Usage: string | aOrAn
<span>This is a picture of {{imageDescription | aOrAn}}</span>
Repeats a string n times
Usage: string | repeat: times: [separator|optional]
<p>{{ 'example' | repeat: 3: '@' }}</p> <!-- Output: "example@example@example" -->
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" -->
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..." -->
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> -->
Uppercase first letter of first word
<p>{{'foo bar' | ucfirst }}</p> <!-- Output: "Foo bar" -->
Uppercase first letter every word
<p>{{'foo bar' | ucwords }}</p> <!-- Output: "Foo Bar" -->
<p>{{'shaquille o'neal' | ucwords }}</p> <!-- Output: "Shaquille O'Neal" -->
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" -->
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" -->
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" -->
Reverses a string
Usage: string | reverse
<p>{{'foo bar' | reverse }}</p> <!-- Output: "rab oof" -->
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 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" -->
Removes accents from Latin characters.
Usage: string | latinise
<p>{{'Féé' | latinise }}</p> <!-- Output: "Fee" -->
<p>{{'foo' | latinise }}</p> <!-- Output: "foo" -->
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']" -->
Converts camelCase string to underscore.
Usage: string | underscore
<p>{{'angularIsAwesome' | underscore }}</p> <!-- Output: "angular_is_awesome" -->
<p>{{'FooBar' | underscore }}</p> <!-- Output: "foo_bar" -->
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 -->
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' -->
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" -->
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##" -->
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 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!" -->
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] -->
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] -->
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] -->
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] -->
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] -->
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] -->
Reverses an array
Usage: array | reverse
this.items = [1, 2, 3];
<li *ngFor="let item of items | reverse"> <!-- Array: [3, 2, 1] -->
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] -->
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] -->
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] -->
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] -->
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] -->
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] -->
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" -->
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" -->
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]" -->
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}}]}" -->
Identical to groupBy pipe, the only difference is that it's an impure pipe.
Impure pipes: https://angular.io/guide/pipes#impure-pipes
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'}]}]" -->
Identical to filterBy pipe, the only difference is that it's an impure pipe.
Impure pipes: https://angular.io/guide/pipes#impure-pipes
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, ...}] -->
Identical to orderBy pipe, the only difference is that it's an impure pipe.
Impure pipes: https://angular.io/guide/pipes#impure-pipes
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]]" -->
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]}" -->
Returns array of object keys
Usage: object | keys
<p>{{ {foo: 1, bar: 2} | keys }}</p> <!-- Output: "['foo', 'bar']" -->
Returns array of object values
Usage: object | values
<p>{{ {foo: 1, bar: 2} | values }}</p> <!-- Output: "[1, 2]" -->
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]]]" -->
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}" -->
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: "{}" -->
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'}" -->
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']}" -->
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}}" -->
Returns the minimum of a given array
Usage: array | min
<p>{{ [1, 2, 3, 1, 2, 3] | min }}</p> <!-- Output: "1" -->
Returns the maximum of a given array
Usage: array | max
<p>{{ [1, 2, 3, 1, 2, 3] | max }}</p> <!-- Output: "3" -->
Returns the sum of a given array
Usage: array | sum
<p>{{ [1, 2, 3, 4] | sum }}</p> <!-- Output: "10" -->
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" -->
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" -->
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" -->
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" -->
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" -->
Returns the square root of a number
Usage: number | sqrt
<p>{{ 9 | sqrt }}</p> <!-- Output: "3" -->
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" -->
Returns the degrees of a number in radians
Usage: number | degrees
<p>{{ 3.141592653589793 | degrees }}</p> <!-- Output: "180" -->
Returns the radians of a number in degrees
Usage: number | radians
<p>{{ 180 | radians }}</p> <!-- Output: "3.141592653589793" -->
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" -->
Usage: any | isNull
<p>{{ null | isNull }}</p> <!-- Output: "true" -->
<p>{{ 1 | isNull }}</p> <!-- Output: "false" -->
Usage: any | isDefined
<p>{{ 1 | isDefined }}</p> <!-- Output: "true" -->
<p>{{ undefined | isDefined }}</p> <!-- Output: "false" -->
Usage: any | isUndefined
<p>{{ 1 | isUndefined }}</p> <!-- Output: "false" -->
<p>{{ undefined | isUndefined }}</p> <!-- Output: "true" -->
Usage: any | isString
<p>{{ 1 | isString }}</p> <!-- Output: "false" -->
<p>{{ '' | isString }}</p> <!-- Output: "true" -->
Usage: any | isNumber
this.func = () => {};
this.num = 1;
<p>{{ num | isNumber }}</p> <!-- Output: "true" -->
<p>{{ func | isNumber }}</p> <!-- Output: "false" -->
Usage: any | isArray
this.arr = [1, 2];
this.num = 1;
<p>{{ num | isArray }}</p> <!-- Output: "false" -->
<p>{{ arr | isArray }}</p> <!-- Output: "true" -->
Usage: any | isObject
this.obj = {a: 1, b: 2};
this.num = 1;
<p>{{ num | isObject }}</p> <!-- Output: "false" -->
<p>{{ obj | isObject }}</p> <!-- Output: "true" -->
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" -->
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" -->
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" -->
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" -->
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" -->
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" -->
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" -->
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" -->
- 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 karma
Clone the project, and install dependencies.
$ git clone https://github.com/danrevah/@ngx-maintenance/ngx-pipes.git
$ npm install
Create a new branch
$ git checkout -b feat/someFeature
Add tests & make sure everything is running properly
$ npm test
Commit & push, and make a pull request!