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
$ npm install ngx-pipes --save
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.import {NgPipesModule} from 'ngx-pipes';
@NgModule({
// ...
imports: [
// ...
NgPipesModule
]
})
import {ReversePipe} from 'ngx-pipes';
@Component({
// ..
providers: [ReversePipe]
})
export class AppComponent {
constructor(private reversePipe: ReversePipe) {
this.reversePipe.transform('foo'); // Returns: "oof"
}
// ..
}
<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" -->
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-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!
FAQs
Useful angular pipes
The npm package ngx-pipes receives a total of 30,310 weekly downloads. As such, ngx-pipes popularity was classified as popular.
We found that ngx-pipes demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.