Useful pipes for Angular with no external dependencies

Extras

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

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

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

Installation

Use npm to install the package

$ npm install ngx-pipes --save

You could either add into your module imports the NgPipesModule in order to add all of the pipes, Or add a specific module such as NgArrayPipesModule, NgObjectPipesModule, NgStringPipesModule, NgMathPipesModule, NgDatePipesModule or NgBooleanPipesModule.

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.

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 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!

Files

README.md

Latest commit

History

README.md

File metadata and controls

Extras

Table of contents

Installation

Date

timeAgo

String

aOrAn

repeat

scan

shorten

stripTags

ucfirst

ucwords

trim

ltrim

rtrim

reverse

slugify

camelize

latinise

lines

underscore

test

match

lpad

rpad

makePluralString

wrap

Array

diff

flatten

initial

tail

intersection

range

reverse

truthify

union

unique

without

pluck

shuffle

every

some

sample

groupBy

groupByImpure

filterBy

filterByImpure

orderBy

orderByImpure

chunk

fromPairs

Object

keys

values

pairs

pick

omit

invert

invertBy

diffObj

Math

min

max

sum

average

percentage

ceil

floor

round

sqrt

pow

degrees