angular-pipes
Advanced tools
angular-pipes is a pipes library for angular 2. The project is hosted as angular-pipes on npm.
WARNING: Work in progress. Not many options are available for now.
Feel free to contribute in any way. Post your own pipes, fix bugs, add options to existing pipes, etc.
emptyheadinitialjoinlasttailuniqwithoutrangemappluckwhereorderBy (not yet documented)reverse (not yet documented)greatergreaterOrEquallesslessOrEqualequalnotEqualidenticalnotIdenticalnullundefinednilnumberstringfunctionarrayobjectdefinednpm install angular-pipes --save
jspm install angular-pipes=npm:angular-pipes
import { NG2_PIPES } from 'angular-pipes';
@Component({
// ...
pipes: [NG2_PIPES]
// ...
}}
You can also import only one category and a string pipe.
import { NG2_BOOLEAN_PIPES, SplitPipe } from 'angular-pipes';
@Component({
// ...
pipes: [NG2_BOOLEAN_PIPES, SplitPipe]
// ...
}}
But this will import all the files, you can do better by importing just the boolean files.
import { NG2_BOOLEAN_PIPES } from 'angular-pipes/pipes/boolean';
import { SplitPipe } from 'angular-pipes/pipes/string';
Same thing for the other categories.
And if you want to only include one file:
import { HeadPipe } from 'angular-pipes/pipes/src/array/head.pipe';
The boolean pipes are only in two files, the types are in types.pipe.ts and the
conditions are in conditions.pipe.ts
If you only use one or two pipes, it's better to include only those two files. It will be lighter. There is no bundle available, this project let you bundle as you wish.
###Collections
####empty
Returns true if the collection is empty.
import { EmptyPipe } from 'angular-pipes/pipes/src/array/empty.pipe';
{{ [] | empty }} <!-- true -->
{{ [1, 2, 3] | empty }} <!-- false -->
####head
Returns the first element of the collection, or undefined if the collection is empty.
import { HeadPipe } from 'angular-pipes/pipes/src/array/head.pipe';
{{ [] | head }} <!-- undefined -->
{{ [1, 2, 3] | head }} <!-- 1 -->
####initial
Returns every element but the last of the collection or empty array if the collection is empty.
import { InitialPipe } from 'angular-pipes/pipes/src/array/initial.pipe';
{{ [] | initial }} <!-- [] -->
{{ [1, 2, 3] | initial }} <!-- [1, 2] -->
####join
Joins an array into a string.
import { JoinPipe } from 'angular-pipes/pipes/src/array/join.pipe';
{{ [] | join }} <!-- '' -->
{{ ['a', 'b', 'c'] | join }} <!-- 'abc' -->
{{ ['a', 'b', 'c'] | join: '0' }} <!-- 'a0b0c' -->
####last
Returns the last element of the collection or undefined if the collection is empty.
import { LastPipe } from 'angular-pipes/pipes/src/array/last.pipe';
{{ [] | last }} <!-- undefined -->
{{ ['a', 'b', 'c'] | last }} <!-- 'c' -->
####tail
Returns every elements but the first of the collection or empty array if the collection is empty.
import { TailPipe } from 'angular-pipes/pipes/src/array/tail.pipe';
{{ [] | tail }} <!-- [] -->
{{ ['a', 'b', 'c'] | last }} <!-- ['b', 'c'] -->
####uniq
Returns the collection keeping only one duplicate.
import { UniqPipe } from 'angular-pipes/pipes/src/array/uniq.pipe';
{{ [] | uniq }} <!-- [] -->
{{ ['a', 'b', 'a'] | last }} <!-- ['a', 'b'] -->
####without
Returns the collection without the specified elements.
import { WithoutPipe } from 'angular-pipes/pipes/src/array/without.pipe';
{{ [1, 2, 3] | without: [1, 3] }} <!-- [2] -->
####range
Returns a range of number with a given size (default: 0) and start (default: 1).
The value on the left hand size does not matter, it is ignored.
import { RangePipe } from 'angular-pipes/pipes/src/array/range.pipe';
<!-- {{ [] | range: size : start }} -->
{{ [] | range: 3: 1 }} <!-- [1, 2, 3] -->
{{ [] | range: 5: 0 }} <!-- [0, 1, 2, 3, 4] -->
{{ [] | range: 5: -2 }} <!-- [-2, -1, 0, 1, 2] -->
####map
Returns the collection that is passed through a map function. If no function is provided, the collection is returned unchanged.
import { MapPipe } from 'angular-pipes/pipes/src/array/map.pipe';
// ...
addOne (item) {
return item + 1;
}
// ...
{{ [1, 2, 3] | map: addOne }} <!-- [2, 3, 4] -->
####pluck
Returns an array of the given property of the object in the array.
import { PluckPipe } from 'angular-pipes/pipes/src/array/pluck.pipe';
// ...
const values = [{
a: 1,
c: {
d: 3,
e: {
f: 4
}
}
}, {
a: 2,
c: {
d: 4,
e: {
f: 5
}
}
}];
// ...
{{ values | pluck: 'a' }} <!-- [1, 2] -->
{{ values | pluck: 'c.d' }} <!-- [3, 4] -->
{{ values | pluck: 'c.e.f' }} <!-- [4, 5] -->
{{ values | pluck: 'c.e.f.g' }} <!-- [undefined, undefined] -->
####where
Filter an array with a given function or a property shorthand.
import { WherePipe } from 'angular-pipes/pipes/src/array/where.pipe';
// ...
const values = [{
a: 1,
c: {
d: 3,
e: {
f: 4
}
}
}, {
a: 2,
c: {
d: 4,
e: {
f: 5
}
}
}];
const numbers = [1, 2, 3, 4, 1, 4];
// ...
aEqualsOne(item) {
return item.a === 1;
}
{{ values | where: aEqualsOne }} <!-- [{ a: 1, c: { d: 3, e: { f: 4 } }] -->
{{ values | where: ['a', 1] }} <!-- [{ a: 1, c: { d: 3, e: { f: 4 } }] -->
{{ values | where: ['c.e.f', 4] }} <!-- [{ a: 1, c: { d: 3, e: { f: 4 } }] -->
{{ numbers | where: 1 }} <!-- [1, 1] -->
####greater
Returns true if the first value is greater than the second value.
import { IsGreaterPipe } from 'angular-pipes/pipes/src/boolean/conditions.pipe';
{{ 0 | greater: 1 }} <!-- false -->
{{ 1 | greater: 0 }} <!-- true -->
{{ 1 | greater: 1 }} <!-- false -->
####greaterOrEqual
Returns true if the first value is greater or equal to the second value.
import { IsGreaterOrEqualPipe } from 'angular-pipes/pipes/src/boolean/conditions.pipe';
{{ 0 | greater: 1 }} <!-- false -->
{{ 1 | greater: 0 }} <!-- true -->
{{ 1 | greater: 1 }} <!-- true -->
####less
Returns true if the first value is less than the second value.
import { IsLessPipe } from 'angular-pipes/pipes/src/boolean/conditions.pipe';
{{ 0 | greater: 1 }} <!-- true -->
{{ 1 | greater: 0 }} <!-- false -->
{{ 1 | greater: 1 }} <!-- false -->
####lessOrEqual
Returns true if the first value is less or equal to the second value.
import { IsLessOrEqualPipe } from 'angular-pipes/pipes/src/boolean/conditions.pipe';
{{ 0 | greater: 1 }} <!-- true -->
{{ 1 | greater: 0 }} <!-- false -->
{{ 1 | greater: 1 }} <!-- true -->
####equal
Returns true if the value are equal (operator ==).
import { IsEqualPipe } from 'angular-pipes/pipes/src/boolean/conditions.pipe';
{{ 0 | greater: 1 }} <!-- false -->
{{ 1 | greater: '1' }} <!-- true -->
{{ 1 | greater: 1 }} <!-- true -->
####notEqual
Returns true if the value are not equal (operator !=).
import { IsNotEqualPipe } from 'angular-pipes/pipes/src/boolean/conditions.pipe';
{{ 0 | greater: 1 }} <!-- true -->
{{ 1 | greater: '1' }} <!-- false -->
{{ 1 | greater: 1 }} <!-- false -->
####identical
Returns true if the value are identical (operator ===).
import { IsIdenticalPipe } from 'angular-pipes/pipes/src/boolean/conditions.pipe';
{{ 0 | greater: 1 }} <!-- false -->
{{ 1 | greater: '1' }} <!-- false -->
{{ 1 | greater: 1 }} <!-- true -->
####notEqual
Returns true if the value are not identical (operator !==).
import { IsNotIdenticalPipe } from 'angular-pipes/pipes/src/boolean/conditions.pipe';
{{ 0 | greater: 1 }} <!-- true -->
{{ 1 | greater: '1' }} <!-- true -->
{{ 1 | greater: 1 }} <!-- false -->
####null
Returns true if the value if null.
import { IsNullPipe } from 'angular-pipes/pipes/src/boolean/types.pipe';
{{ null | null }} <!-- true -->
{{ 1 | null }} <!-- false -->
I actually need to make sure that null is not parsed as the JS keyword instead of the pipe.
I'll update this soon.
####undefined
Returns true if the value if undefined.
import { IsUndefinedPipe } from 'angular-pipes/pipes/src/boolean/types.pipe';
{{ a | null }} <!-- true if a does not exists -->
{{ 1 | null }} <!-- false -->
I actually need to make sure that undefined is not parsed as the JS variable instead of the pipe.
I'll update this soon.
####nil
Returns true if the value if null or undefined.
import { IsNilPipe } from 'angular-pipes/pipes/src/boolean/types.pipe';
{{ a | nil }} <!-- true if a does not exists -->
{{ null | nil }} <!-- true -->
{{ 1 | nil }} <!-- false -->
####number
Returns true if the value is a number.
import { IsNumberPipe } from 'angular-pipes/pipes/src/boolean/types.pipe';
{{ 'a' | number }} <!-- false -->
{{ 1 | number }} <!-- true -->
####string
Returns true if the value is a string.
import { IsStringPipe } from 'angular-pipes/pipes/src/boolean/types.pipe';
{{ 'a' | string }} <!-- true -->
{{ 1 | string }} <!-- false -->
####function
Returns true if the value is a function.
import { IsFunctionPipe } from 'angular-pipes/pipes/src/boolean/types.pipe';
myFn() {
// ...
}
{{ 'a' | function }} <!-- false -->
{{ myFn | function }} <!-- true -->
####array
Returns true if the value is an array.
import { IsArrayPipe } from 'angular-pipes/pipes/src/boolean/types.pipe';
{{ 'a' | array }} <!-- false -->
{{ [] | array }} <!-- true -->
####object
Returns true if the value is an object.
import { IsObjectPipe } from 'angular-pipes/pipes/src/boolean/types.pipe';
{{ 'a' | object }} <!-- false -->
{{ {} | object }} <!-- true -->
####defined
Returns true if the value is defined (nor null nor undefined).
import { IsDefinedPipe } from 'angular-pipes/pipes/src/boolean/types.pipe';
{{ 'a' | defined }} <!-- true -->
{{ null | defined }} <!-- false -->
{{ a | defined }} <!-- false if a does not exists -->
npm install
npm run lite
And navigate to /unit-tests.html.
It may take some time for the files to transpile.
TODO: Karma
1.2.0
OrderByPipeReversePipeFAQs
Angular pipes library
The npm package angular-pipes receives a total of 6,499 weekly downloads. As such, angular-pipes popularity was classified as popular.
We found that angular-pipes demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
pnpm's new minimumReleaseAge setting delays package updates to prevent supply chain attacks, with other tools like Taze and NCU following suit.
Security News
The Rust Security Response WG is warning of phishing emails from rustfoundation.dev targeting crates.io users.
Product
Socket now lets you customize pull request alert headers, helping security teams share clear guidance right in PRs to speed reviews and reduce back-and-forth.