github.com/danrevah/ngx-pipes @v3.2.2

Useful pipes for Angular with no external dependencies

Extras

TypeSerializer - Serializer / Deserializer, designed to make prettier code while using decorators.

Segal Decorators - Bunch of highly useful decorators, helps in writing a more concise code while improving readability

Table of contents

• Installation
• Contributing
• Changelog
• Date
  • timeAgo
• String
  • aOrAn
  • repeat
  • scan
  • shorten
  • stripTags
  • ucfirst
  • ucwords
  • trim
  • ltrim
  • rtrim
  • reverse
  • slugify
  • camelize
  • latinise
  • lines
  • underscore
  • test
  • match
  • lpad
  • rpad
  • makePluralString
  • wrap
• Array
  • diff
  • flatten
  • initial
  • intersection
  • range
  • reverse
  • tail
  • truthify
  • union
  • unique
  • without
  • pluck
  • shuffle
  • every
  • some
  • sample
  • groupBy
  • groupByImpure
  • filterBy
  • filterByImpure
  • orderBy
  • orderByImpure
  • chunk
  • fromPairs
• Object
  • keys
  • values
  • pairs
  • pick
  • omit
  • invert
  • invertBy
  • diffObj
• Math
  • min
  • max
  • sum
  • average
  • 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

Installation

1. Use npm to install the package

terminal $ npm install ngx-pipes --save

1. 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, NgDatePipesModule or NgBooleanPipesModule.

```typescript import {NgPipesModule} from 'ngx-pipes';

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

1. Pipes are also injectable and can be used in Components / Services / etc..

```typescript
import {ReversePipe} from 'ngx-pipes';

@Component({ // .. providers: [ReversePipe] }) export class AppComponent { constructor(private reversePipe: ReversePipe) { this.reversePipe.transform('foo'); // Returns: "oof" } // .. } ```

1. You can also use pipes as part of your template for ex.

{{ 'foo' | reverse }}

and it's also possible to stack multiple pipes

{{ ' foo' | ltrim | reverse }}

Date

timeAgo

Time ago pipe converts date to 'just now', 'X days ago', 'last week', 'X days ago', etc..

Usage: string | timeAgo

import * as moment from 'moment';

const now = new Date();

// timeAgo also supports moment.js objects
const lastWeek = moment().subtract(10, 'days');

<span>Updated: {{now | timeAgo}}</span> 
<span>Updated: {{lastWeek | timeAgo}}</span> 

String

aOrAn

Prefixes input string with "a" or "an".

Usage: string | aOrAn

<span>This is a picture of {{imageDescription | aOrAn}}</span>

repeat

Repeats a string n times

Usage: string | repeat: times: [separator|optional]

{{ 'example' | repeat: 3: '@' }}

scan

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

Usage: string | scan: [ARRAY]

{{'Hey {0}, {1}' | scan: ['foo', 'bar']}}

shorten

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: '...'}}

stripTags

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

Usage: string | stripTags: [ARRAY]

{{'<a href="">foo</a> 

bar

' | stripTags }}




{{'<a href="">foo</a> 

bar

' | stripTags: 'p'}}

ucfirst

Uppercase first letter of first word

{{'foo bar' | ucfirst }}

ucwords

Uppercase first letter every word

{{'foo bar' | ucwords }}




{{'shaquille o'neal' | ucwords }}

trim

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

Usage: string | trim: [characters|optional]

{{'  foo  ' | trim }}




{{'foobarfoo' | trim: 'foo' }}

ltrim

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

Usage: string | ltrim: [characters|optional]

{{'  foo  ' | ltrim }}




{{'foobarfoo' | ltrim: 'foo' }}

rtrim

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

Usage: string | rtrim: [characters|optional]

{{'  foo  ' | rtrim }}




{{'foobarfoo' | rtrim: 'foo' }}

reverse

Reverses a string

Usage: string | reverse

{{'foo bar' | reverse }}

slugify

Slugify a string (lower case and add dash between words).

Usage: string | slugify

{{'Foo Bar' | slugify }}




{{'Some Text To Slugify' | slugify }}

camelize

Camelize a string replaces dashes and underscores and converts to camelCase string.

Usage: string | camelize

{{'foo_bar' | camelize }}




{{'some_dashed-with-underscore' | camelize }}




{{'-dash_first-' | camelize }}

latinise

Removes accents from Latin characters.

Usage: string | latinise

{{'Féé' | latinise }}




{{'foo' | latinise }}

lines

Converts a string with new lines into an array of each line.

Usage: string | lines

{{'Some\nSentence with\r\nNew line' | lines }}

underscore

Converts camelCase string to underscore.

Usage: string | underscore

{{'angularIsAwesome' | underscore }}




{{'FooBar' | underscore }}

test

Tests if a string matches a pattern.

Usage: string | test: {RegExp}: {Flags}

{{'foo 42' | test: '[\\d]+$': 'g' }}




{{'42 foo' | test: '[\\d]+$': 'g' }}




{{'FOO' | test: '^foo': 'i' }}

match

Returns array of matched elements in string.

Usage: string | match: {RegExp}: {Flags}

{{'foo 42' | match: '[\\d]+$': 'g' }}




{{'42 foo' | match: '[\\d]+$': 'g' }}




{{'FOO' | match: '^foo': 'i' }}

lpad

Left pad a string to a given length using a given pad character (default is a space)

Usage: string | lpad: length: [padCharacter:string|optional]

{{'foo' | lpad: 5}}





{{String(3) | lpad: 5: '0'}}

rpad

Right pad a string to a given length using a given pad character (default is a space)

Usage: string | rpad: length: [padCharacter:string|optional]

{{'Foo' | rpad: 5: '#'}}

makePluralString

Make a singular string plural. Optional quantity argument specifies how many of the singular string there are.

Usage: string | makePluralString: [quantity:string|optional]

<span>{{'Painting' | makePluralString}}</span> 
<span>{{'Painting' | makePluralString: 1}}</span> 
<span>{{'One Painting' | makePluralString: 1}}</span> 
<span>{{'Painting' | makePluralString: 4}}</span> 
<span>{{'Four Painting' | makePluralString: 4}}</span> 

wrap

Wrap a string between a prefix and a suffix

Usage: string | wrap: prefix: suffix

{{'Foo' | wrap: 'nice prefix ': ' and awesome suffix!'}}

Array

diff

Returns array of diff between arrays

Usage: array | diff: [ARRAY]: [ARRAY]: ... : [ARRAY]

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

<li *ngFor="let item of items | diff: [1, 2]"> 

flatten

Flattens nested array, passing shallow will mean it will only be flattened a single level

Usage: 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"> 

initial

Slicing off the end of the array by n elements

Usage: array | initial: n

this.items = [first, second, third];

<li *ngFor="let item of items | initial: 1"> 

tail

Slicing off the start of the array by n elements

Usage: array | tail: n

this.items = [first, second, third];

<li *ngFor="let item of items | tail: 1"> 

intersection

Returns the intersections of an arrays

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

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

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

range

Returns an array with range of numbers

Usage: range: [start: number, default = '1']: [count: number]: [step: number | optional, default = '1']

this.items = this.rangePipe.transform(1, 5); // Returns: [1, 2, 3, 4, 5]

<li *ngFor="let item of items"> 

reverse

Reverses an array

Usage: array | reverse

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

<li *ngFor="let item of items | reverse"> 

truthify

Removes un-truthy values from array

Usage: array | truthify

this.items = [null, 1, false, undefined, 2, 0, 3, NaN, 4, ''];

<li *ngFor="let item of items | truthify"> 

union

Combine two arrays

Usage: array | union: [ARRAY]

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

<li *ngFor="let item of items | union: [[4]]"> 

unique

Removes duplicates from array

Usage: `array | unique: 'Pro