A collection of pipes for Angular apps.
Use npm to install @nglrx/pipes.
npm i @nglrx/pipesImport 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.
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
}
}A collection of pipes exported by NglrxStringPipesModule.
Converts a string to camel case and strips hyphens, underscores and whitespaces.
Usage: string | camelCase
{{ 'Convert_to camel-case' | camelCase }}
<!-- Returns 'convertToCamelCase' -->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' -->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!' -->Converts a given string to lower case.
Usage: string | lowerCase
{{ 'Convert TO LoWeR-case' | lowerCase }}
<!-- Returns 'convert to lower-case' -->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!-------' -->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!' -->Converts a string to pascal case and strips hyphens, underscores and whitespaces.
Usage: string | pascalCase
{{ 'convert_to PASCAL-case' | pascalCase }}
<!-- Returns 'ConvertToPascalCase' -->Converts a string to sentence case.
Usage: string | sentenceCase
{{ 'convert TO Sentence case.' | sentenceCase }}
<!-- Returns 'Convert to sentence case.' -->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' -->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'] -->Converts a string to titleCase case.
Usage: string | titleCase
{{ 'convert TO title cASE.' | titleCase }}
<!-- Returns 'Convert To Title Case.' -->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!' -->Strips the leading whitespaces from a given string.
Usage: string | trimLeft
{{ ' This is a test string! ' | trimLeft }}
<!-- Returns 'This is a test string! ' -->Strips the trailing whitespaces from a given string.
Usage: string | trimRight
{{ ' This is a test string! ' | trimRight }}
<!-- Returns ' This is a test string!' -->Converts a given string to upper case.
Usage: string | upperCase
{{ 'Convert TO UpPeR-case.' | upperCase }}
<!-- Returns 'CONVERT TO UPPER-CASE.' -->A collection of pipes exported by NglrxNumberPipesModule.
Returns the absolute value of given number.
Usage: number | abs
{{ -384 | abs }}
<!-- Returns 384 -->Returns the average of all numbers in a given array.
Usage: array | avg
{{ [10, 45, 200, 5, 92] | avg }}
<!-- Returns 70.4 -->Finds the maximum from an array of numbers.
Usage: array | max
{{ [10, 45, 200, 5, 92] | max }}
<!-- Returns 200 -->Finds the minimum from an array of numbers.
Usage: array | min
{{ [10, 45, 200, 5, 92] | min }}
<!-- Returns 5 -->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 -->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 -->Returns the rounded value of given number. By default the value is rounded to the nearest integer.
It also accepts an optional argument RoundType for rounding the value up or down.
RoundType.Default = Default rounding as in Math.round()
RoundType.Floor = Round down as in Math.floor()
RoundType.Ceil = Round up as in Math.ceil()
Optionally, the number of decimal places to which the result should be rounded may also be specified.
Usage: number | round [:decimalPlaces][:roundType]
{{ 1234.56789 | round }}
<!-- Returns 1235 -->
{{ 1234.56789 | round : 3 : RoundType.Floor }}
<!-- Returns 1234.567 -->
{{ 9876.54321 | round : 2 : RoundType.Ceil }}
<!-- Returns 9876.54 -->Returns the square root of given number.
Usage: number | sqrt
{{ 625 | sqrt }}
<!-- Returns 25 -->Returns the sum of all numbers in a given array.
Usage: array | sum
{{ [10, 45, 200, 5, 92] | sum }}
<!-- Returns 352 -->A collection of pipes exported by NglrxGenericPipesModule.
Returns the length of a given value of any supported type.
Supported data types are string, array, number, boolean, or any data type which has own property 'length'.
For an array the number of elements is returned. For others the number of characters in value is returned.
Usage: value | length
{{ 'This is a test string!' | length }}
<!-- Returns 22 -->
{{ [10, 45, 200, 50, 92] | length }}
<!-- Returns 5 -->Reverses a given value of any supported type.
Supported data types are string, array, number, boolean.
For an array the sequence of elements is reversed. For others the sequence of characters in value is reversed.
Usage: value | reverse
{{ 'This is a test string!' | reverse }}
<!-- Returns '!gnirts tset a si sihT' -->
{{ ['a', 'b', 'c', 'd', 'e'] | reverse }}
<!-- Returns ['e', 'd', 'c', 'b', 'a'] -->Returns the type of given value.
Returns the name of the type in string. All types are supported.
Usage: value | typeOf
{{ 'This is a test string!' | typeOf }}
<!-- Returns 'string' -->
{{ { foo: 'bar' } | typeOf }}
<!-- Returns 'object' -->
For more information on pipes, refer to Angular - pipes documentation.