ng2-pipes

# Angular2 Pipes [![Build Status](https://travis-ci.org/danrevah/ng2-pipes.svg?branch=master)](https://travis-ci.org/danrevah/ng2-pipes) [![npm version](https://badge.fury.io/js/ng2-pipes.svg)](https://badge.fury.io/js/ng2-pipes) > Useful pipes for Angular2. ## Table of contents - [Installation](#installation) - [String](#String) - [repeat](#repeat) - [scan](#scan) - [shorten](#shorten) - [stripTags](#stripTags) - [ucfirst](#ucfirst) - [ucwords](#ucwords) - [trim](#trim) - [ltrim](#ltrim) - [rtrim](#rtrim) - [reverse](#reverse) - [Array](#Array) - [diff](#diff) - [flatten](#flatten) - [initial](#initial) - [intersection](#intersection) - [reverse](#reverse) - [tail](#tail) - [truthify](#truthify) - [union](#union) - [unique](#unique) - [without](#without) - [Math](#Math) - [min](#min) - [max](#max) - [percent](#percent) - [ceil](#ceil) - [floor](#floor) - [round](#round) - [sqrt](#sqrt) - [pow](#pow) - [degrees](#degrees) - [radians](#radians) - [bytes](#bytes) - [Boolean](#Boolean) - [isNull](#isNull) - [isDefined](#isDefined) - [isUndefined](#isUndefined) - [isString](#isString) - [isFunction](#isFunction) - [isNumber](#isNumber) - [isArray](#isArray) - [isObject](#isObject) - [isGreaterThan](#isGreaterThan) - [isGreaterEqualThan](#isGreaterEqualThan) - [isLessThan](#isLessThan) - [isLessEqualThan](#isLessEqualThan) - [isEqualTo](#isEqualTo) - [isNotEqualTo](#isNotEqualTo) - [isIdenticalTo](#isIdenticalTo) - [isNotIdenticalTo](#isNotIdenticalTo) ## Installation 1. Use npm to install the package ``` $ npm install ng2-pipes --save ``` 2. Add into your module `imports` the `NgPipesModule` ```typescript import {NgPipesModule} from 'ng2-pipes'; @NgModule({ // ... imports: [ // ... NgPipesModule ] }) ``` ## String ### repeat Repeats a string n times Api: `string | repeat: times: [separator|optional]` ```html {{ 'example' | repeat: 3: '@' }}  ``` ### scan Scans string and replace `{i}` placeholders by equivalent member of the array Api: `string | scan: [ARRAY]` ```html {{'Hey {0}, {1}' | scan: ['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]` ```html {{'Hey foo bar' | shorten: 3: '...'}}  ``` ### stripTags Strips a HTML tags from string and providing which tags should not be removed Api: `string | stripTags: [ARRAY]` ```html {{'<a href="">foo</a> bar' | stripTags }}  {{'<a href="">foo</a> bar' | stripTags: ['p']}}  ``` ### ucfirst Uppercase first letter of first word ```html {{'foo bar' | ucfirst }}  ``` ### ucwords Uppercase first letter every word ```html {{'foo bar' | ucwords }}  ``` ### trim Strips characters from the beginning and end of a string (default character is space). Api: `string | trim: [characters|optional]` ```html {{' foo ' | trim }}  {{'foobarfoo' | ltrim: 'foo' }}  ``` ### ltrim Strips characters from the beginning of a string (default character is space). Api: `string | ltrim: [characters|optional]` ```html {{' foo ' | ltrim }}  {{'foobarfoo' | ltrim: 'foo' }}  ``` ### rtrim Strips characters from the end of a string (default character is space). Api: `string | rtrim: [characters|optional]` ```html {{' foo ' | rtrim }}  {{'foobarfoo' | rtrim: 'foo' }}  ``` ### reverse Reverses a string Api: `string | reverse` ```html {{'foo bar' | reverse }}  ``` ## Array ### diff Returns array of diff between arrays Api: `array | diff: [ARRAY]: [ARRAY]: ... : [ARRAY]` ```typescript this.items = [1, 2, 3, 4]; ``` ```html <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]` ```typescript this.items = [1,2,3,[4,5,6,[7,8,9],[10,11,12,13,[14],[15],[16, [17]]]]]; ``` ```html <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` ```typescript this.items = [first, second, third]; ``` ```html <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` ```typescript this.items = [first, second, third]; ``` ```html <li *ngFor="let item of items | tail: 1"> <-- Array: [second, third] --> ``` ### intersection Returns the intersections of an arrays Api: `array | intersection: [ARRAY]: [ARRAY]: ... : [ARRAY]` ```typescript this.items = [1, 2, 3, 4, 5]; ``` ```html <li *ngFor="let item of items | intersection: [1, 2]: [3, 6]"> <-- Array: [1, 2, 3] --> ``` ### reverse Reverses an array Api: `array | reverse` ```typescript this.items = [1, 2, 3]; ``` ```html <li *ngFor="let item of items | reverse"> <-- Array: [3, 2, 1] --> ``` ### truthify Removes un-truthy values from array Api: `array | truthify` ```typescript this.items = [null, 1, false, undefined, 2, 0, 3, NaN, 4, '']; ``` ```html <li *ngFor="let item of items | truthify"> <-- Array: [1, 2, 3, 4] --> ``` ### union Removes un-truthy values from array Api: `array | union: [ARRAY]` ```typescript this.items = [1, 2, 3]; ``` ```html <li *ngFor="let item of items | union: [[4]]"> <-- Array: [1, 2, 3, 4] --> ``` ### unique Removes duplicates from array Api: `array | unique` ```typescript this.items = [1, 2, 3, 1, 2, 3]; ``` ```html <li *ngFor="let item of items | unique"> <-- Array: [1, 2, 3] --> ``` ### without Returns array without specific elements Api: `array | without: [ARRAY]` ```typescript this.items = [1, 2, 3, 1, 2, 3]; ``` ```html <li *ngFor="let item of items | without: [1,3]"> <-- Array: [2, 2] --> ``` ## Math ### min Returns the minimum of a given array Api: `array | min` ```html {{ [1, 2, 3, 1, 2, 3] | min }} <-- Output: "1" --> ``` ### max Returns the maximum of a given array Api: `array | max` ```html {{ [1, 2, 3, 1, 2, 3] | max }} <-- Output: "3" --> ``` ### sum Returns the sum of a given array Api: `array | sum` ```html {{ [1, 2, 3, 4] | sum }} <-- Output: "10" --> ``` ### percent Returns percent between numbers Api: `number | percentage: [total | default = 100]: [floor | default = false]` ```html {{ 5 | percentage }} <-- Output: "5" --> {{ 5 | percentage: 160 }} <-- Output: "3.125" --> {{ 5 | percentage: 160: true }} <-- Output: "3" --> ``` ### ceil Returns ceil of a number by precision Api: `number | ceil: [precision | default = 0]` ```html {{ 42.123 | ceil }} <-- Output: "43" --> {{ 42.123 | ceil: 2 }} <-- Output: "42.13" --> ``` ### floor Returns floor of a number by precision Api: `number | floor: [precision | default = 0]` ```html {{ 42.123 | floor }} <-- Output: "42" --> {{ 42.123 | floor: 2 }} <-- Output: "42.12" --> ``` ### round Returns round of a number by precision Api: `number | round: [precision | default = 0]` ```html {{ 42.4 | round }} <-- Output: "42" --> {{ 42.5 | round }} <-- Output: "43" --> {{ 42.123 | round: 2 }} <-- Output: "42.12" --> ``` ### sqrt Returns the square root of a number Api: `number | sqrt` ```html {{ 9 | sqrt }} <-- Output: "3" --> ``` ### pow Returns the power of a number Api: `number | pow: [power | default = 2]` ```html {{ 3 | pow }} <-- Output: "9" --> {{ 3 | pow: 3 }} <-- Output: "27" --> ``` ### degrees Returns the degrees of a number in radians Api: `number | degrees` ```html {{ 3.141592653589793 | degrees }} <-- Output: "180" --> ``` ### radians Returns the radians of a number in degrees Api: `number | radians` ```html {{ 180 | radians }} <-- Output: "3.141592653589793" --> ``` ### bytes Returns bytes with a unit symbol Api: `number | bytes` ```html {{ 10 | bytes }} <-- Output: "1 B" --> {{ 1000 | bytes }} <-- Output: "1 KB" --> {{ 1000000 | bytes }} <-- Output: "1 MB" --> {{ 1000000000 | bytes }} <-- Output: "1 GB" --> ``` ## Boolean ### isNull Api: `any | isNull` ```html {{ null | isNull }} <-- Output: "true" --> {{ 1 | isNull }} <-- Output: "false" --> ``` ### isDefined Api: `any | isDefined` ```html {{ 1 | isDefined }} <-- Output: "true" --> {{ undefined | isDefined }} <-- Output: "false" --> ``` ### isUndefined Api: `any | isUndefined` ```html {{ 1 | isUndefined }} <-- Output: "false" --> {{ undefined | isUndefined }} <-- Output: "true" --> ``` ### isString Api: `any | isString` ```html {{ 1 | isString }} <-- Output: "false" --> {{ '' | isString }} <-- Output: "true" --> ``` ### isNumber Api: `any | isNumber` ```typescript this.func = () => {}; this.num = 1; ``` ```html {{ num | isNumber }} <-- Output: "true" --> {{ func | isNumber }} <-- Output: "false" --> ``` ### isArray Api: `any | isArray` ```typescript this.arr = [1, 2]; this.num = 1; ``` ```html {{ num | isArray }} <-- Output: "false" --> {{ arr | isArray }} <-- Output: "true" --> ``` ### isObject Api: `any | isObject` ```typescript this.obj = {a: 1, b: 2}; this.num = 1; ``` ```html {{ num | isObject }} <-- Output: "false" --> {{ obj | isObject }} <-- Output: "true" --> ``` ### isGreaterThan Api: `number | isGreaterThan: otherNumber` ```html {{ 1 | isGreaterThan: 1 }} <-- Output: "false" --> {{ 1 | isGreaterThan: 2 }} <-- Output: "false" --> {{ 2 | isGreaterThan: 1 }} <-- Output: "true" --> ``` ### isGreaterEqualThan Api: `number | isGreaterEqualThan: otherNumber` ```html {{ 1 | isGreaterEqualThan: 1 }} <-- Output: "true" --> {{ 1 | isGreaterEqualThan: 2 }} <-- Output: "false" --> {{ 2 | isGreaterEqualThan: 1 }} <-- Output: "true" --> ``` ### isLessThan Api: `number | isLessThan: otherNumber` ```html {{ 1 | isLessThan: 1 }} <-- Output: "false" --> {{ 1 | isLessThan: 2 }} <-- Output: "true" --> {{ 2 | isLessThan: 1 }} <-- Output: "false" --> ``` ### isLessEqualThan Api: `number | isLessEqualThan: otherNumber` ```html {{ 1 | isLessEqualThan: 1 }} <-- Output: "true" --> {{ 1 | isLessEqualThan: 2 }} <-- Output: "true" --> {{ 2 | isLessEqualThan: 1 }} <-- Output: "false" --> ``` ### isEqualTo Api: `number | isEqualTo: otherNumber` ```html {{ 1 | isEqualTo: 1 }} <-- Output: "true" --> {{ 1 | isEqualTo: '1' }} <-- Output: "true" --> {{ 1 | isEqualTo: 2 }} <-- Output: "false" --> {{ 2 | isEqualTo: 1 }} <-- Output: "false" --> ``` ### isNotEqualTo Api: `number | isNotEqualTo: otherNumber` ```html {{ 1 | isNotEqualTo: 1 }} <-- Output: "false" --> {{ 1 | isNotEqualTo: '1' }} <-- Output: "false" --> {{ 1 | isNotEqualTo: 2 }} <-- Output: "true" --> {{ 2 | isNotEqualTo: 1 }} <-- Output: "true" --> ``` ### isIdenticalTo Api: `number | isIdenticalTo: otherNumber` ```html {{ 1 | isIdenticalTo: 1 }} <-- Output: "true" --> {{ 1 | isIdenticalTo: '1' }} <-- Output: "false" --> {{ 1 | isIdenticalTo: 2 }} <-- Output: "false" --> {{ 2 | isIdenticalTo: 1 }} <-- Output: "false" --> ``` ### isNotIdenticalTo Api: `number | isNotIdenticalTo: otherNumber` ```html {{ 1 | isNotIdenticalTo: 1 }} <-- Output: "false" --> {{ 1 | isNotIdenticalTo: '1' }} <-- Output: "true" --> {{ 1 | isNotIdenticalTo: 2 }} <-- Output: "true" --> {{ 2 | isNotIdenticalTo: 1 }} <-- Output: "true" --> ```