angular2-pipes

Angular2 Pipes

Useful pipes for Angular2.

Table of contents

• Installation
• String
  • repeat
  • scan
  • shorten
  • strip-tags
  • ucfirst
  • ucwords
  • trim
  • ltrim
  • rtrim
  • reverse
• Array
  • diff
  • flatten
  • initial
  • intersection
  • reverse
  • tail
  • truthify
  • union
  • unique
  • without
• Math
  • min
  • max
  • percent
  • ceil
  • floor
  • round
  • sqrt
  • pow

Installation

1. Use npm to install the package

$ npm install ng2-pipes --save 

1. Add into your module imports the PipesModule

import {NgPipesModule} from 'ng2-pipes';

@NgModule({
 // ...
 imports: [
   // ...
   NgPipesModule
 ]
})

String

repeat

Repeats a string n times

Api: string | repeat: times: [separator|optional] Example:

<p>{{ 'example' | repeat: 3: '@' }}</p> <!-- Output: "example@example@example" -->

scan

Scans string and replace {i} placeholders by equivalent member of the array

Api: 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

Api: string | shorten: length: [suffix|optional]: [wordBreak boolean|optional]

<p>{{'Hey foo bar' | shorten: 3: '...'}}</p> <!-- Output: "Hey..." -->

strip-tags

Strips a HTML tags from string and providing which tags should not be removed

Api: string | strip-tags: [ARRAY]

<p>{{'<a href="">foo</a> <p class="foo">bar</p>' | strip-tags }}</p> <!-- Output: "foo bar" -->
<p>{{'<a href="">foo</a> <p class="foo">bar</p>' | strip-tags: ['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" -->

trim

Strips characters from the beginning and end of a string (default character is space).

Api: string | trim: [characters|optional]

<p>{{'  foo  ' | trim }}</p> <!-- Output: "foo" -->
<p>{{'foobarfoo' | ltrim: 'foo' }}</p> <!-- Output: "bar" -->

ltrim

Strips characters from the beginning of a string (default character is space).

Api: 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).

Api: string | rtrim: [characters|optional]

<p>{{'  foo  ' | rtrim }}</p> <!-- Output: "  foo" -->
<p>{{'foobarfoo' | rtrim: 'foo' }}</p> <!-- Output: "foobar" -->

reverse

Reverses a string

Api: string | reverse

<p>{{'foo bar' | reverse }}</p> <!-- Output: "rab oof" -->

Array

diff

Returns array of diff between arrays

Api: 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

Api: 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

Api: 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

Api: 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

Api: array | intersection: [ARRAY]: [ARRAY]: ... : [ARRAY]

this.items = [1, 2, 3, 4, 5];

<li *ngFor="let item of items | intersection: [1, 2]: [3, 6]"> <-- Array: [1, 2, 3] -->

reverse

Reverses an array

Api: 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

Api: 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

Removes un-truthy values from array

Api: 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

Api: array | unique

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

Api: array | without: [ARRAY]

this.items = [1, 2, 3, 1, 2, 3];

<li *ngFor="let item of items | without: [1,3]"> <-- Array: [2, 2] -->

Math

min

Returns the minimum of a given array

Api: array | min

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

max

Returns the maximum of a given array

Api: array | max

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

sum

Returns the sum of a given array

Api: array | sum

<p>{{ [1, 2, 3, 4] | sum }}</p> <-- Output: "10" -->

percent

Returns percent between numbers

Api: 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

Api: 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

Api: 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

Api: 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

Api: number | sqrt

<p>{{ 9 | sqrt }}</p> <-- Output: "3" -->

pow

Returns the power of a number

Api: number | pow: [power | default = 2]

<p>{{ 3 | pow }}</p> <-- Output: "9" -->
<p>{{ 3 | pow: 3 }}</p> <-- Output: "27" -->