npm install angular2-pipes> Useful pipes for Angular with no external dependencies
- Installation
- Contributing
- Changelog
- String
- repeat
- scan
- shorten
- stripTags
- ucfirst
- ucwords
- trim
- ltrim
- rtrim
- reverse
- slugify
- camelize
- latinise
- lines
- underscore
- test
- match
- lpad
- rpad
- Array
- diff
- flatten
- initial
- intersection
- reverse
- tail
- truthify
- union
- unique
- without
- pluck
- shuffle
- every
- some
- sample
- groupBy
- groupByImpure
- filterBy
- filterByImpure
- orderBy
- orderByImpure
- Object
- keys
- values
- pairs
- pick
- omit
- invert
- invertBy
- diffObj
- Math
- min
- max
- sum
- percentage
- ceil
- floor
- round
- sqrt
- pow
- degrees
- radians
- bytes
- Boolean
- isNull
- isDefined
- isUndefined
- isString
- isFunction
- isNumber
- isArray
- isObject
- isGreaterThan
- isGreaterEqualThan
- isLessThan
- isLessEqualThan
- isEqualTo
- isNotEqualTo
- isIdenticalTo
- isNotIdenticalTo
1. Use npm to install the package
``terminal`
$ npm install ngx-pipes --save
2. 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 or NgBooleanPipesModule.
`typescript`
import {NgPipesModule} from 'ngx-pipes';
@NgModule({
// ...
imports: [
// ...
NgPipesModule
]
})
3. Pipes are also injectable and can be used in Components / Services / etc..
`typescript
import {ReversePipe} from 'ngx-pipes/src/app/pipes/array/reverse';
@Component({
// ..
providers: [ReversePipe]
})
export class AppComponent {
constructor(private reversePipe: ReversePipe) {
this.reversePipe.transform('foo'); // Returns: "oof"
}
// ..
}
`
Repeats a string n times
Usage: string | repeat: times: [separator|optional]
` {{ 'example' | repeat: 3: '@' }}html`
Scans string and replace {i} placeholders by equivalent member of the array
Usage: string | scan: [ARRAY]
` {{'Hey {0}, {1}' | scan: ['foo', 'bar']}}html`
Shortening a string by length and providing a custom string to denote an omission
Usage: string | shorten: length: [suffix|optional]: [wordBreak boolean|optional]
` {{'Hey foo bar' | shorten: 3: '...'}}html`
Strips a HTML tags from string and providing which tags should not be removed
Usage: string | stripTags: [ARRAY]
` {{'foo barhtml
{{'foo
bar
' | stripTags: 'p'}}$3
Uppercase first letter of first word
html
{{'foo bar' | ucfirst }}
`$3
Uppercase first letter every word
html
{{'foo bar' | ucwords }}
`$3
Strips characters from the beginning and end of a string (default character is space).
Usage:
html
{{' foo ' | trim }}
{{'foobarfoo' | trim: 'foo' }}
`$3
Strips characters from the beginning of a string (default character is space).
Usage:
html
{{' foo ' | ltrim }}
{{'foobarfoo' | ltrim: 'foo' }}
`$3
Strips characters from the end of a string (default character is space).
Usage:
html
{{' foo ' | rtrim }}
{{'foobarfoo' | rtrim: 'foo' }}
`$3
Reverses a string
Usage:
html
{{'foo bar' | reverse }}
`$3
Slugify a string (lower case and add dash between words).
Usage:
html
{{'Foo Bar' | slugify }}
{{'Some Text To Slugify' | slugify }}
`$3
Camelize a string replaces dashes and underscores and converts to camelCase string.
Usage:
html
{{'foo_bar' | camelize }}
{{'some_dashed-with-underscore' | camelize }}
{{'-dash_first-' | camelize }}
`$3
Removes accents from Latin characters.
Usage:
html
{{'Féé' | latinise }}
{{'foo' | latinise }}
`$3
Converts a string with new lines into an array of each line.
Usage:
html
{{'Some\nSentence with\r\nNew line' | lines }}
`$3
Converts camelCase string to underscore.
Usage:
html
{{'angularIsAwesome' | underscore }}
{{'FooBar' | underscore }}
`$3
Tests if a string matches a pattern.
Usage:
html
{{'foo 42' | test: '[\\d]+$': 'g' }}
{{'42 foo' | test: '[\\d]+$': 'g' }}
{{'FOO' | test: '^foo': 'i' }}
`$3
Returns array of matched elements in string.
Usage:
html
{{'foo 42' | match: '[\\d]+$': 'g' }}
{{'42 foo' | match: '[\\d]+$': 'g' }}
{{'FOO' | match: '^foo': 'i' }}
`$3
Left pad a string to a given length using a given pad character (default is a space)
Usage:
html
{{'foo' | lpad: 5}}
{{String(3) | lpad: 5: '0'}}
`$3
Right pad a string to a given length using a given pad character (default is a space)
Usage:
html
{{'Foo' | rpad: 5: '#'}}
`Array
$3
Returns array of diff between arrays
Usage:
typescript
this.items = [1, 2, 3, 4];
`html
`$3
Flattens nested array, passing shallow will mean it will only be flattened a single level
Usage:
typescript
this.items = [1,2,3,[4,5,6,[7,8,9],[10,11,12,13,[14],[15],[16, [17]]]]];
`html
`$3
Slicing off the end of the array by n elements
Usage:
typescript
this.items = [first, second, third];
`html
`$3
Slicing off the start of the array by n elements
Usage:
typescript
this.items = [first, second, third];
`html
`$3
Returns the intersections of an arrays
Usage:
typescript
this.items = [1, 2, 3, 4, 5];
`html
`$3
Reverses an array
Usage:
typescript
this.items = [1, 2, 3];
`html
`$3
Removes un-truthy values from array
Usage:
typescript
this.items = [null, 1, false, undefined, 2, 0, 3, NaN, 4, ''];
`html
`$3
Combine two arrays
Usage:
typescript
this.items = [1, 2, 3];
`html
`$3
Removes duplicates from array
Usage:
typescript
this.items = [1, 2, 3, 1, 2, 3];
`html
`$3
Returns array without specific elements
Usage:
typescript
this.items = [1, 2, 3, 1, 2, 3];
`html
`$3
Returns array of properties values
Usage:
typescript
this.items = [
{
a: 1,
b: {
c: 4
}
},
{
a: 2,
b: {
c: 5
}
},
{
a: 3,
b: {
c: 6
}
},
];
`html
`$3
Returns randomly shuffled array
Usage:
typescript
this.items = [1, 2, 3, 4, 5, 6];
`html
`$3
Returns true if every elements of the array fits the predicate otherwise false
Usage:
typescript
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;
};
`html
{{ itemsOne | every: predicate }}
{{ itemsTwo | every: predicate }}
{{ itemsThree | every: predicate }}
`$3
Returns true if some elements of the array fits the predicate otherwise false
Usage:
typescript
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;
};
`html
{{ itemsOne | some: predicate }}
{{ itemsTwo | some: predicate }}
{{ itemsThree | some: predicate }}
`$3
Returns sample items randomly from array
Usage:
html
{{ [1, 2, 3, 4] | sample }}
{{ [1, 2, 3, 4] | sample: 2 }}
`$3
Returns object of grouped by items by discriminator, and supports nested properties.
Usage:
typescript
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' }}
];
`html
{{ arrayObject | groupBy: 'elm' }}
{{ arrayObject | groupBy: ['elm', 'value'] }}
{{ arrayObject | groupBy: ['elm', 'value']: '_' }}
{{ arrayNestedObject | groupBy: 'prop.deep' }}
`groupByImpure
Identical to groupBy pipe, the only difference is that it's an impure pipe.
Impure pipes: https://angular.io/guide/pipes#impure-pipes
$3
Returns object array of grouped by items by discriminator
Usage:
typescript
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' }}
];
`html
{{ users | filterBy: ['id']: 1 }}
{{ users | filterBy: ['work.company']: 'Bar Tech' }}
{{ users | filterBy: ['first_name', 'last_name']: 'John' }}
`filterByImpure
Identical to filterBy pipe, the only difference is that it's an impure pipe.
Impure pipes: https://angular.io/guide/pipes#impure-pipes
$3
Returns ordered array by configuration
Usage:
typescript
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}}
];
`html
{{ numbers | orderBy }}
{{ numbers | orderBy: '-' }}
{{ deepObj | orderBy: 'amount' }}
{{ deepObj | orderBy: '-amount' }}
{{ deepObj | orderBy: 'deep.prop' }}
{{ deepObj | orderBy: '-deep.prop' }}
{{ obj | orderBy: ['amount', 'id'] }}
`orderByImpure
Identical to orderBy pipe, the only difference is that it's an impure pipe.
Impure pipes: https://angular.io/guide/pipes#impure-pipes
Object
$3
Returns array of object keys
Usage:
html
{{ {foo: 1, bar: 2} | keys }}
`$3
Returns array of object values
Usage:
html
{{ {foo: 1, bar: 2} | values }}
`$3
Returns array of an object key value pairs
Usage:
html
{{ {foo: 1, bar: 2} | pairs }}
{{ {foo: [1, 2], bar: [3, 4]} | pairs }}
`$3
Returns object with picked keys from object
Usage:
html
{{ {foo: 1, bar: 2} | pick: 'foo' }}
{{ {foo: 1, bar: 2} | pick: 'foo': 'bar' }}
`$3
Returns object after omitting keys from object (opposite of pick)
Usage:
html
{{ {foo: 1, bar: 2} | omit: 'foo' }}
{{ {foo: 1, bar: 2} | omit: 'foo': 'bar' }}
`$3
Returns object with inverted keys and values. in case of equal values, subsequent values overwrite property assignments of previous values.
Usage:
html
{{ {foo: 1, bar: 2} | invert }}
`$3
Returns object with inverted keys and values. in case of equal values, will add to an array.
Usage:
typescript
this.cb = (value): string => {
return name_${value};
};
`html
{{ {foo: 1, bar: 2} | invertBy }}
{{ {foo: 1, bar: 2} | invertBy: cb }}
{{ {a: 1, b: 2, c: 1, d: 2} | invertBy }}
`$3
Returns a diff object of two objects
Usage:
html
{{ {a: 1} | diffObj: {a: 1} }}
{{ {a: 1} | diffObj: {a: 2} }}
{{ {a: 1, b: 2} | diffObj: {a: 1, b: 1} }}
{{ {a: 1, b: 2, c: {d: 3} } | diffObj: {a: 1, b: 1, c: {d: 1} } }}
`Math
$3
Returns the minimum of a given array
Usage:
html
{{ [1, 2, 3, 1, 2, 3] | min }}
`$3
Returns the maximum of a given array
Usage:
html
{{ [1, 2, 3, 1, 2, 3] | max }}
`$3
Returns the sum of a given array
Usage:
html
{{ [1, 2, 3, 4] | sum }}
`$3
Returns percentage between numbers
Usage:
html
{{ 5 | percentage }}
{{ 5 | percentage: 160 }}
{{ 5 | percentage: 160: true }}
`$3
Returns ceil of a number by precision
Usage:
html
{{ 42.123 | ceil }}
{{ 42.123 | ceil: 2 }}
`$3
Returns floor of a number by precision
Usage:
html
{{ 42.123 | floor }}
{{ 42.123 | floor: 2 }}
`$3
Returns round of a number by precision
Usage:
html
{{ 42.4 | round }}
{{ 42.5 | round }}
{{ 42.123 | round: 2 }}
`$3
Returns the square root of a number
Usage:
html
{{ 9 | sqrt }}
`$3
Returns the power of a number
Usage:
html
{{ 3 | pow }}
{{ 3 | pow: 3 }}
`$3
Returns the degrees of a number in radians
Usage:
html
{{ 3.141592653589793 | degrees }}
`$3
Returns the radians of a number in degrees
Usage:
html
{{ 180 | radians }}
`$3
Returns bytes with a unit symbol
Usage:
html
{{ 10 | bytes }}
{{ 1048576 | bytes }}
{{ 1073741824 | bytes }}
{{ 1.0995116e12 | bytes }}
`Boolean
$3
Usage:
html
{{ null | isNull }}
{{ 1 | isNull }}
`$3
Usage:
html
{{ 1 | isDefined }}
{{ undefined | isDefined }}
`$3
Usage:
html
{{ 1 | isUndefined }}
{{ undefined | isUndefined }}
`
$3
Usage:
html
{{ 1 | isString }}
{{ '' | isString }}
`$3
Usage:
typescript
this.func = () => {};
this.num = 1;
`html
{{ num | isNumber }}
{{ func | isNumber }}
`$3
Usage:
typescript
this.arr = [1, 2];
this.num = 1;
`html
{{ num | isArray }}
{{ arr | isArray }}
`$3
Usage:
typescript
this.obj = {a: 1, b: 2};
this.num = 1;
`html
{{ num | isObject }}
{{ obj | isObject }}
`$3
Usage:
html
{{ 1 | isGreaterThan: 1 }}
{{ 1 | isGreaterThan: 2 }}
{{ 2 | isGreaterThan: 1 }}
`$3
Usage:
html
{{ 1 | isGreaterEqualThan: 1 }}
{{ 1 | isGreaterEqualThan: 2 }}
{{ 2 | isGreaterEqualThan: 1 }}
`$3
Usage:
html
{{ 1 | isLessThan: 1 }}
{{ 1 | isLessThan: 2 }}
{{ 2 | isLessThan: 1 }}
`$3
Usage:
html
{{ 1 | isLessEqualThan: 1 }}
{{ 1 | isLessEqualThan: 2 }}
{{ 2 | isLessEqualThan: 1 }}
`$3
Usage:
html
{{ 1 | isEqualTo: 1 }}
{{ 1 | isEqualTo: '1' }}
{{ 1 | isEqualTo: 2 }}
{{ 2 | isEqualTo: 1 }}
`$3
Usage:
html
{{ 1 | isNotEqualTo: 1 }}
{{ 1 | isNotEqualTo: '1' }}
{{ 1 | isNotEqualTo: 2 }}
{{ 2 | isNotEqualTo: 1 }}
`$3
Usage:
html
{{ 1 | isIdenticalTo: 1 }}
{{ 1 | isIdenticalTo: '1' }}
{{ 1 | isIdenticalTo: 2 }}
{{ 2 | isIdenticalTo: 1 }}
`$3
Usage:
html
{{ 1 | isNotIdenticalTo: 1 }}
{{ 1 | isNotIdenticalTo: '1' }}
{{ 1 | isNotIdenticalTo: 2 }}
{{ 2 | isNotIdenticalTo: 1 }}
`Contributing
* Before adding any new feature or a fix make sure to open an issue first!
Make sure you have
& karma installed globally.`bash
$ npm install -g angular-cli karma
`Clone the project, and install dependencies.
bash
$ git clone https://github.com/danrevah/ngx-pipes.git
$ npm install
`Create a new branch
bash
$ git checkout -b feat/someFeature
`Add tests & make sure everything is running properly
bash
$ npm test
``Commit & push, and make a pull request!