angular-custom-pipes

Installation

1. Use npm to install the package

    $ npm install angular-custom-pipes
   

2. You can import all Pipes by AngularCustomPipesModule or specific pipes importing one module such as MathPipesModule, for example:

    import { AngularCustomPipesModule } from 'angular-custom-pipes';
    
    @NgModule({
     // ...
     imports: [
       // ...
       AngularCustomPipesModule
     ]
    })
   

3. Now you are able to use imported pipes, for example:

   In template:

    <p>{{ 10 | calculate: 2: CalculateActions.ADD }}</p> // Output: 12
   

   In component:

    import { CalculateActions, CalculatePipe } from 'angular-custom-pipes';
    
    export class AppComponent {
      constructor(private calculatePipe: CalculatePipe) {
        this.calculatePipe.transform(10, 2, CalculateActions.ADD); // Output: 12
      }
      // ..
    }
   

Documentation

Array

• drop
• head
• indexOf
• initial
• join
• last
• removeFalsy
• sum
• unique
• uniqueBy

Math

• calculate
• max
• min
• pow
• round

Object

• assign
• invert
• keys
• omit
• pick
• toArray
• values

String

• concat
• includes
• lowerFirst
• replace
• split
• startsWith
• upperFirst

Array

drop

Returns slice of array

Example

<p>{{ [1, 2, 3] | drop: 2 }}</p> // Output: [3]

<p>{{ [1, 2, 3] | drop }}</p> // Output: [1, 2, 3]

head

Returns first value of array

Example

<p>{{ [1, 2, 3] | head }}</p> // Output: [1]

indexOf

Returns index of array or -1

Example

<p>{{ [1, 2, 3] | indexOf: 2 }}</p> // Output: 1

initial

Returns array without last value

Example

<p>{{ [1, 2, 3] | initial: 2 }}</p> // Output: [1, 2]

isEmpty

Returns true if array is empty, else false

Example

<p>{{ [1, 2, 3] | isEmpty }}</p> // Output: false

<p>{{ [] | isEmpty }}</p> // Output: true

join

Returns a string separated by separator

Example

<p>{{ [1, 2, 3] | join: ' + ' }}</p> // Output: '1 + 2 + 3'

<p>{{ [1, 2, 3] | join: '*' }}</p> // Output: '1*2*3'

last

Returns last value of array

Example

<p>{{ [1, 2, 3] | last }}</p> // Output: 3

removeFalsy

Returns array without falsy values

Example

<p>{{ [1, null, 2, [], NaN] | removeFalsy }}</p> // Output: [1, 2]

sum

Returns sum of values in array

Example

<p>{{ [1, 2, 3] | sum }}</p> // Output: 6

unique

Returns new array without duplicate values

Example

<p>{{ [1, 2, 3, 2] | unique }}</p> // Output: [1, 2, 3]

uniqueBy

Returns new array without duplicate values

Example

<p>{{ [{ 'x': 1 }, { 'x': 2 }, { 'x': 1 }] | uniqueBy: 'x' }}</p> // Output: [{ 'x': 1 }, { 'x': 2 }]

Math

calculate

Returns result of calculate

Example

<p>{{ 10 | calculate: 2: CalculateActions.ADD }}</p> // Output: 12

<p>{{ 10 | calculate: 2: CalculateActions.SUBTRACT }}</p> // Output: 8

<p>{{ 10 | calculate: 2: CalculateActions.MULTIPLY }}</p> // Output: 20

<p>{{ 10 | calculate: 2: CalculateActions.DIVIDE }}</p> // Output: 5

max

Returns maximum value of array

Example

<p>{{ [1, 2, 3] | max }}</p> // Output: 3

min

Returns minimum value of array

Example

<p>{{ [1, 2, 3] | min }}</p> // Output: 1

pow

Returns the result of exponent power

Example

<p>{{ 10 | pow: 2 }}</p> // Output: 100

rounded

Returns rounded value base on the argument

Example

<p>{{ 4.222 | rounded: 2 }}</p> // Output: 4.22

<p>{{ 4.006 | rounded: 2 }}</p> // Output: 4.01

Object

assign

Returns target object

Example

<p>{{ {foo: 1} | assign: {bar: 2} }}</p> // Output: {foo: 1, bar: 2}

invert

Returns inverted object

Example

<p>{{ {foo: 1, bar: 2} | invert }}</p> // Output: {1: 'foo', 2: 'bar'}

keys

Returns array of object keys

Example

<p>{{ {foo: 1, bar: 2} | keys }}</p> // Output: ['foo', 'bar']

omit

Returns object without defined key/keys

Example

<p>{{ {foo: 1, bar: 2} | omit: 'foo' }}</p> // Output: {bar: 2}

<p>{{ {foo: 1, bar: 2} | omit: 'foo': 'bar' }}</p> // Output: {}

pick

Returns object only with defined key/keys

Example

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

toArray

Returns transformed an object to array

Example

<p>{{ {foo: 1, bar: 2} | toArray }}</p> // Output: [1, 2]

const value = {
  foo: {
    type: 1
  },
  bar: {
    type: 2
  }
}

<p>{{ value | toArray }}</p> // Output: [{type: 1}, {type: 2}]

values

Returns array with object values

Example

<p>{{ {foo: 1, bar: 2} | keys }}</p> // Output: [1, 2]

String

concat

Returns concatenated string base on the parameters

Example

<p>{{ 'Lorem' | concat: ' ': 'Ipsum }}</p> // Output: 'Lorem Ipsum'

includes

Returns true if search value exists, else false

Example

<p>{{ 'Lorem ipsum solid' | includes: 'solid' }}</p> // Output: true

<p>{{ 'Lorem ipsum solid' | includes: 'dummy' }}</p> // Output: false

lowerFirst

Returns string with first value lowercase

Example

<p>{{ 'Lorem ipsum' | lowerFirst }}</p> // Output: 'lorem ipsum'

split

Returns array of string base on the parameters

Example

<p>{{ 'Lorem-ipsum-solid' | split: '-' }}</p> // Output: ['Lorem', 'ipsum', 'solid']

startsWith

Returns true if value starts with parameter, else false

Example

<p>{{ 'Lorem ipsum solid' | startsWith: 'L' }}</p> // Output: true

<p>{{ 'Lorem ipsum solid' | startsWith: 'l' }}</p> // Output: false

upperFirst

Returns string with first value uppercase

Example

<p>{{ 'lorem ipsum' | upperFirst }}</p> // Output: 'Lorem ipsum'