@nglrx/pipes

A library of pipes for Angular apps.

Installation

Use npm to install @nglrx/pipes.

npm i @nglrx/pipes

Import Module

Import module NglrxPipesModule to your module for using all pipes.

import { NglrxPipesModule } from '@nglrx/pipes';

@NgModule({
  //...
  imports: [
    NglrxPipesModule
  ]
})
export class YourModule { }

Alternatively, you can use pipes from specific module(s) like NglrxNumberPipesModule or NglrxStringPipesModule.

Usage of Pipes

Pipes can be used in your component's template

{{ 'This-is-a-string' | length }}
<!-- Returns 16 -->

They can also be chained

{{ '  Another-string  ' | trim | length }}
<!-- Returns 14 -->

Or they can be used within components or services by calling the transform method

import { LengthPipe } from '@nglrx/pipes';

@Component({
  providers: [ LengthPipe ]
})
export class YourComponent {
  
  constructor(private lengthPipe: LengthPipe) {
    this.lengthPipe.transform('Yet-another-string'); // Returns 18
  }
}

Library of Pipes

• String Pipes
  • camelCase
  • charAt
  • concat
  • interpolate
  • lowerCase
  • padEnd
  • padStart
  • pascalCase
  • repeat
  • sentenceCase
  • slugify
  • split
  • titleCase
  • trim
  • trimLeft
  • trimRight
  • truncate
  • upperCase
• Number Pipes
  • abs
  • avg
  • ceil
  • floor
  • max
  • min
  • pct
  • pow
  • round
  • sqrt
  • sum
• Array Pipes
  • combine
  • copyWithin
  • every
  • fill
  • first
  • join
  • last
  • map
  • some
• Generic Pipes
  • length
  • reverse
  • typeOf

String Pipes

A collection of pipes exported by NglrxStringPipesModule.

camelCase

Converts a string to camel case and strips hyphens, underscores and whitespaces.

Usage: string | camelCase

{{ 'Convert_to camel-case' | camelCase }}
<!-- Returns 'convertToCamelCase' -->

charAt

Returns the character value at given position in a string.

Usage: string | charAt [ : position ]

Range of position is from 0 (default) to n-1, where n is length of the string.

{{ 'This is a sample string.' | charAt: 12 }}
<!-- Returns 'm' -->

concat

Concatenates one or more string(s) to current string at the end.

Usage: string | concat: string1 [ : string2 ] ...

{{ 'This' | concat: ' is': ' a': ' string': '!' }}
<!-- Returns 'This is a string!' -->

interpolate

Replaces marked up parameters surrounded by { and } delimiters in given string with target string values.
The indices of parameters start from 0 and increment by 1.
The target string values can be literals or variables and their position should match the index.

Usage: string | interpolate: string1 [ : string2 ] ...

{{ 'This {0} an {1} {2}!' | interpolate: 'is': 'interpolated': 'string' }}
<!-- Returns 'This is an interpolated string!' -->

lowerCase

Converts a given string to lower case.

Usage: string | lowerCase

{{ 'Convert TO LoWeR-case' | lowerCase }}
<!-- Returns 'convert to lower-case' -->

padEnd

Pads the given string with a fill string so that the resulting string reaches the specified max length. The fill string is appended to the given string.
Default fill string is space ' '.

Usage: string | padEnd: maxLength [ : fillString ]

{{ This is a test string! | padEnd: 29: '---' }}
<!-- Returns 'This is a test string!-------' -->

padStart

Pads the given string with a fill string so that the resulting string reaches the specified max length. The fill string is prepended to the given string.
Default fill string is space ' '.

Usage: string | padStart: maxLength [ : fillString ]

{{ This is a test string! | padStart: 27: '--' }}
<!-- Returns '-----This is a test string!' -->

pascalCase

Converts a string to pascal case and strips hyphens, underscores and whitespaces.

Usage: string | pascalCase

{{ 'convert_to PASCAL-case' | pascalCase }}
<!-- Returns 'ConvertToPascalCase' -->

repeat

Repeats a given string 'count' number of times separated by an optional delimiter.
Default count is 1. Default delimiter is empty string ''.
An error is thrown if the value of count is less than 1.

Usage: string | repeat [ : count ] [ : delimiter ]

{{ 'Repeated' | repeat: 5: '_' }}
<!-- Returns Repeated_Repeated_Repeated_Repeated_Repeated -->

sentenceCase

Converts a string to sentence case.

Usage: string | sentenceCase

{{ 'convert TO Sentence case.' | sentenceCase }}
<!-- Returns 'Convert to sentence case.' -->

slugify

Slugifies a given string with an optional char separator. Default separator char is hyphen '-'.
Special characters are stripped from string.

Usage: string | slugify [ : separator ]

{{ 'this_-is__a - string!' | slugify: '_' }}
<!-- Returns 'this_is_a_string' -->

split

Splits a given string into an array of sub-strings using an optional delimiter.
Default delimiter is space ' '.
Optionally, you may also specify a limit (integer) on the number of splits.

Usage: string | split [ : delimiter ] [ : limit ]

{{ 'This_is_a_string_separated_with_underscore' | split: '_': 4 }}
<!-- Returns ['This', 'is', 'a', 'string'] -->

titleCase

Converts a string to titleCase case.

Usage: string | titleCase

{{ 'convert TO title cASE.' | titleCase }}
<!-- Returns 'Convert To Title Case.' -->

trim

Strips the leading and trailing whitespaces from a given string.

Usage: string | trim

{{ ' This is a test string!  ' | trim }}
<!-- Returns 'This is a test string!' -->

trimLeft

Strips the leading whitespaces from a given string.

Usage: string | trimLeft

{{ ' This is a test string!  ' | trimLeft }}
<!-- Returns 'This is a test string!  ' -->

trimRight

Strips the trailing whitespaces from a given string.

Usage: string | trimRight

{{ ' This is a test string!  ' | trimRight }}
<!-- Returns ' This is a test string!' -->

truncate

Shortens the given string to specified length followed by an ellipsis '...'. Optionally, you may also specify a suffix (string). An error is thrown if the value of length is less than 1.

Usage: string | truncate : length [ : suffix ]

{{ 'This is a test string!' | truncate : 14 }}
<!-- Returns 'This is a test...' -->

upperCase

Converts a given string to upper case.

Usage: string | upperCase

{{ 'Convert TO UpPeR-case.' | upperCase }}
<!-- Returns 'CONVERT TO UPPER-CASE.' -->

Number Pipes

A collection of pipes exported by NglrxNumberPipesModule.

abs

Returns the absolute value of given number.

Usage: number | abs

{{ -384 | abs }}
<!-- Returns 384 -->

avg

Returns the average of all numbers in a given array.

Usage: array | avg

{{ [10, 45, 200, 5, 92] | avg }}
<!-- Returns 70.4 -->

ceil

Returns the smallest number with specified decimal places greater than or equal to given number. By default the value is rounded-up to the nearest integer.

Optionally, the number of decimal places to which the result should be rounded-up may also be specified.

Usage: number | ceil [ : decimalPlaces]

{{ 9876.54321 | ceil: 2 }}
<!-- Returns 9876.55 -->

floor

Returns the greatest number with specified decimal places less than or equal to given number. By default the value is rounded-down to the nearest integer.

Optionally, the number of decimal places to which the result should be rounded-down may also be specified.

Usage: number | floor [ : decimalPlaces]

{{ 1234.56789 | floor: 3 }}
<!-- Returns 1234.567 -->

max

Finds the maximum from an array of numbers.

Usage: array | max

{{ [10, 45, 200, 5, 92] | max }}
<!-- Returns 200 -->

min

Finds the minimum from an array of numbers.

Usage: array | min

{{ [10, 45, 200, 5, 92] | min }}
<!-- Returns 5 -->

pct

Returns how much percent is a number of the given total. If not specified default value is 100.
Optionally, number of decimal places (integer) may be specified to round-off the percentage.

Usage: number | pct [ : total ] [ : decimalPlaces ]

{{ 25 | pct: 483: 2 }}
<!-- Returns 5.18 -->

pow

Returns the value of the base raised to a specified power.
Default value of exponent is 0.

Usage: base | pow [ : exponent ]

{{ 4 | pow: 3 }}
<!-- Returns 64 -->

round

Returns the rounded value of given number. By default the value is rounded to the nearest integer.

It also accepts a