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
.
Returns a left-padded string.
import { NgLeftPadPipeModule } from 'angular-pipes';
{{ 'aaa' | leftpad: 4 }}
<!-- ' aaa' -->
{{ 'aaa' | leftpad: 3 }}
<!-- 'aaa' -->
{{ 'aaa' | leftpad: 5: 'b' }}
<!-- 'bbaaa' -->
Returns a right-padded string.
import { NgRightPadPipeModule } from 'angular-pipes';
{{ 'aaa' | rightpad: 4 }}
<!-- 'aaa ' -->
{{ 'aaa' | rightpad: 3 }}
<!-- 'aaa' -->
{{ 'aaa' | rightpad: 5: 'b' }}
<!-- 'aaabb' -->
Returns a padded string. It starts with left and then right.
import { NgPadPipeModule } from 'angular-pipes';
{{ 'aaa' | pad: 4 }}
<!-- ' aaa' -->
{{ 'aaa' | pad: 5 }}
<!-- ' aaa ' -->
{{ 'aaa' | pad: 5: 'b' }}
<!-- 'baaab' -->
Trims the string.
import { NgTrimPipeModule } from 'angular-pipes';
{{ 'aaa' | trim }}
<!-- 'aaa' -->
{{ 'aaa ' | trim }}
<!-- 'aaa' -->
{{ ' aaa ' | trim }}
<!-- 'aaa' -->
Split a string into an array.
import { NgSplitPipeModule } from 'angular-pipes';
{{ 'Hello World' | split }}
<!-- ['Hello', 'World'] -->
{{ 'ABABA' | split: 'B' }}
<!-- ['A', 'A', 'A'] -->
{{ 'ABABA' | split: 'B': 2 }}
<!-- ['A', 'A'] -->
This is the String#replace()
function, if you want to know more about the arguments, check the official documentation.
import { NgReplacePipeModule } from 'angular-pipes';
This is the String#match()
function, if you want to know more about the arguments, check the official documentation.
import { NgMatchPipeModule } from 'angular-pipes';
This is the String#test()
function, if you want to know more about the arguments, check the official documentation.
import { NgTestPipeModule } from 'angular-pipes';
Replaces the \n
, \r
and \r\n
into <br />
. This function returns HTML so you need to use it
with the [innerHTML]
binding.
import { NgNewlinesPipeModule } from 'angular-pipes';
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 the string. If the argument is true, all the words will be capitalized.
import { NgCapitalizePipeModule } from 'angular-pipes';
{{ 'hello world' | capitalize }}
<!-- 'Hello world' -->
{{ 'hello world' | capitalize: true }}
<!-- 'Hello World' -->
{{ 'hELLo wOrld' | capitalize: true }}
<!-- 'Hello World' -->
Uppercase the first letter.
import { NgUpperFirstPipeModule } from 'angular-pipes';
{{ 'hello world' | upperfirst }}
<!-- 'Hello world' -->
Template string.
import { NgTemplatePipeModule } from 'angular-pipes';
{{ "Hello $1, it's $2" | template: 'world': 'me' }}
<!-- 'Hello world, it's me' -->
The encodeURI function.
import { NgEncodeURIPipeModule } from 'angular-pipes';
The encodeURIComponent function.
import { NgEncodeURIComponentPipeModule } from 'angular-pipes';
The decodeURI function.
import { NgDecodeURIPipeModule } from 'angular-pipes';
The decodeURIComponent function.
import { NgDecodeURIComponentPipeModule } from 'angular-pipes';
Repeats a string.
import { NgRepeatPipeModule } from 'angular-pipes';
{{ 'a' | repeat: 2 }}
<!-- 'aa' -->
{{ 'a' | repeat: 2: 'b' }}
<!-- 'aba' -->
Truncate a string.
Arguments: (size, suffix, preserve)
import { NgTruncatePipeModule } from 'angular-pipes';
{{ '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 a string.
Arguments: (string)
import { NgSlugifyPipeModule } from 'angular-pipes';
{{ 'The zombie world war began' | slugify }}
<!-- 'the-zombie-world-war-began' -->
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] )
import { NgStripTagsPipeModule } from 'angular-pipes';
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... -->
Remove accents/diacritics from a string
import { NgLatinizePipeModule } from 'angular-pipes';
{{ 'Sòme strÏng with Âccénts' | latinize }}
<!-- result: Some strIng with Accents -->
Wrap a string with another string
Arguments: ( string, string, string[optional] )
import { NgWrapPipeModule } from 'angular-pipes';
<p>{{ 'foo' | wrap: '/' }}</p>
<!--result: /foo/ -->
<p>{{ 'foo' | wrap: '{{': '}}' }}</p>
<!--result: {{foo}} -->
With pipe check string has start and/or ends
Arguments: ( string, start[optional], ends[optional], case-sensitive[optional] )
import { NgWithPipeModule } from 'angular-pipes';
{{'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'-->
Reverse a string.
import { NgReverseStrPipeModule } from 'angular-pipes';
{{ 'hello world' | reverseStr }}
<!-- 'dlrow olleh' -->