String
leftpad
rightpad
pad
trim
split
replace
match
test
newlines
capitalize
upperfirst
template
encodeURI
encodeURIComponent
decodeURI
decodeURIComponent
repeat
truncate
slugify
stripTags
latinize
wrap
with
reverseStr
You can check the module import here
.
leftpad
Returns a left-padded string.
File
import { NgLeftPadPipeModule } from 'angular-pipes';
Usage
{{ 'aaa' | leftpad: 4 }}
<!-- ' aaa' -->
{{ 'aaa' | leftpad: 3 }}
<!-- 'aaa' -->
{{ 'aaa' | leftpad: 5: 'b' }}
<!-- 'bbaaa' -->
rightpad
Returns a right-padded string.
File
import { NgRightPadPipeModule } from 'angular-pipes';
Usage
{{ 'aaa' | rightpad: 4 }}
<!-- 'aaa ' -->
{{ 'aaa' | rightpad: 3 }}
<!-- 'aaa' -->
{{ 'aaa' | rightpad: 5: 'b' }}
<!-- 'aaabb' -->
pad
Returns a padded string. It starts with left and then right.
File
import { NgPadPipeModule } from 'angular-pipes';
Usage
{{ 'aaa' | pad: 4 }}
<!-- ' aaa' -->
{{ 'aaa' | pad: 5 }}
<!-- ' aaa ' -->
{{ 'aaa' | pad: 5: 'b' }}
<!-- 'baaab' -->
trim
Trims the string.
File
import { NgTrimPipeModule } from 'angular-pipes';
Usage
{{ 'aaa' | trim }}
<!-- 'aaa' -->
{{ 'aaa ' | trim }}
<!-- 'aaa' -->
{{ ' aaa ' | trim }}
<!-- 'aaa' -->
split
Split a string into an array.
File
import { NgSplitPipeModule } from 'angular-pipes';
Usage
{{ 'Hello World' | split }}
<!-- ['Hello', 'World'] -->
{{ 'ABABA' | split: 'B' }}
<!-- ['A', 'A', 'A'] -->
{{ 'ABABA' | split: 'B': 2 }}
<!-- ['A', 'A'] -->
replace
This is the String#replace()
function, if you want to know more about the arguments, check the official documentation.
File
import { NgReplacePipeModule } from 'angular-pipes';
match
This is the String#match()
function, if you want to know more about the arguments, check the official documentation.
File
import { NgMatchPipeModule } from 'angular-pipes';
test
This is the String#test()
function, if you want to know more about the arguments, check the official documentation.
File
import { NgTestPipeModule } from 'angular-pipes';
newlines
Replaces the \n
, \r
and \r\n
into <br />
. This function returns HTML so you need to use it
with the [innerHTML]
binding.
File
import { NgNewlinesPipeModule } from 'angular-pipes';
Usage
this.value = 'Hello, World. \nHow are you ?';
<span [innerHTML]="value | newlines"></span>
<!-- Resulting dom
<span>
Hello, World. <br /> How are you ?
</span>
-->
<!-- Resulting display
Hello, World.
How are you ?
-->
capitalize
Capitalize the string. If the argument is true, all the words will be capitalized.
File
import { NgCapitalizePipeModule } from 'angular-pipes';
Usage
{{ 'hello world' | capitalize }}
<!-- 'Hello world' -->
{{ 'hello world' | capitalize: true }}
<!-- 'Hello World' -->
{{ 'hELLo wOrld' | capitalize: true }}
<!-- 'Hello World' -->
upperfirst
Uppercase the first letter.
File
import { NgUpperFirstPipeModule } from 'angular-pipes';
Usage
{{ 'hello world' | upperfirst }}
<!-- 'Hello world' -->
template
Template string.
File
import { NgTemplatePipeModule } from 'angular-pipes';
Usage
{{ "Hello $1, it's $2" | template: 'world': 'me' }}
<!-- 'Hello world, it's me' -->
encodeuri
The encodeURI function.
File
import { NgEncodeURIPipeModule } from 'angular-pipes';
encodeuricomponent
The encodeURIComponent function.
File
import { NgEncodeURIComponentPipeModule } from 'angular-pipes';
decodeuri
The decodeURI function.
File
import { NgDecodeURIPipeModule } from 'angular-pipes';
decodeuricomponent
The decodeURIComponent function.
File
import { NgDecodeURIComponentPipeModule } from 'angular-pipes';
repeat
Repeats a string.
File
import { NgRepeatPipeModule } from 'angular-pipes';
Usage
{{ 'a' | repeat: 2 }}
<!-- 'aa' -->
{{ 'a' | repeat: 2: 'b' }}
<!-- 'aba' -->
truncate
Truncate a string.
Arguments: (size, suffix, preserve)
File
import { NgTruncatePipeModule } from 'angular-pipes';
Usage
{{ 'Hello World' | truncate: 4 }}
<!-- 'Hell' -->
{{ 'Hello World' | truncate: 4: '': true }}
<!-- 'Hello' -->
{{ 'Hello World' | truncate: 4: '...': true }}
<!-- 'Hello...' -->
{{ 'Hello World, how is it going?' | truncate: 14: '...': true }}
<!-- 'Hello World, how...' -->
slugify
Slugify a string.
Arguments: (string)
File
import { NgSlugifyPipeModule } from 'angular-pipes';
Usage
{{ 'The zombie world war began' | slugify }}
<!-- 'the-zombie-world-war-began' -->
striptags
strip out html tags from string
Important: this Pipe jobs it's not to replace innerHtml directive, it's only for tiny plain text
Arguments: ( string, ends, case-sensitive[optional] )
File
import { NgStripTagsPipeModule } from 'angular-pipes';
Usage
var text = '
<p class="paragraph">Lorem Ipsum is simply dummy text of the printing...</p>
';
<p>{{ text | stripTags }}</p>
<!--result: Lorem Ipsum is simply dummy text of the printing... -->
latinize
Remove accents/diacritics from a string
File
import { NgLatinizePipeModule } from 'angular-pipes';
Usage
{{ 'Sòme strÏng with Âccénts' | latinize }}
<!-- result: Some strIng with Accents -->
wrap
Wrap a string with another string
Arguments: ( string, string, string[optional] )
File
import { NgWrapPipeModule } from 'angular-pipes';
Usage
<p>{{ 'foo' | wrap: '/' }}</p>
<!--result: /foo/ -->
<p>{{ 'foo' | wrap: '{{': '}}' }}</p>
<!--result: {{foo}} -->
with
With pipe check string has start and/or ends
Arguments: ( string, start[optional], ends[optional], case-sensitive[optional] )
File
import { NgWithPipeModule } from 'angular-pipes';
Usage
{{'The Flash Reverse' | with: 'The' : null, true}}
<!-- result: true -->
{{'The Flash Reverse' | with: 'The' : 'Reverse' : true}}
<!-- result: true-->
{{'The Flash Reverse' | with: 'The' : 'Reverse'}}
<!-- result: true-->
{{'The Flash Reverse' | with: 'the' : 'reverse'}}
<!-- result: true-->
{{'The Flash Reverse' | with: 'the' : 'Reverse' : true}}
<!-- result: false-->
{{'The Flash Reverse' | with: 'the' : 'reverse' : true}}
<!-- result: false-->
{{'The Flash Reverse' | with: 'Blue' : 'Reverse' : true}}
<!-- result: false-->
{{'The Flash Reverse' | with: 'The' : 'Black' : true}}
<!-- result: false-->
{{'The Flash Reverse' | with: '' : 'Black' : true}}
<!-- result: false-->
{{'The Flash Reverse' | with: '' : '' : true}}
<!-- result: 'The Flash Reverse'-->
{{'The Flash Reverse' | with: null : null : true}}
<!-- result: 'The Flash Reverse'-->
{{'The Flash Reverse' | with: null : null}}
<!-- result: 'The Flash Reverse'-->
{{'The Flash Reverse' | with}}
<!-- result: 'The Flash Reverse'-->
reversestr
Reverse a string.
File
import { NgReverseStrPipeModule } from 'angular-pipes';
Usage
{{ 'hello world' | reverseStr }}
<!-- 'dlrow olleh' -->