leftpadrightpadpadtrimsplitreplacematchtestnewlinescapitalizeupperfirsttemplateencodeURIencodeURIComponentdecodeURIdecodeURIComponentrepeattruncateslugifystripTagslatinizewrapwithreverseStr
You can check the module import here.
Returns a left-padded string.
import { LeftPadPipe } from 'angular-pipes';{{ 'aaa' | leftpad: 4 }} <!-- ' aaa' -->
{{ 'aaa' | leftpad: 3 }} <!-- 'aaa' -->
{{ 'aaa' | leftpad: 5: 'b' }} <!-- 'bbaaa' -->Returns a right-padded string.
import { RightPadPipe } 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 { PadPipe } from 'angular-pipes';{{ 'aaa' | pad: 4 }} <!-- ' aaa' -->
{{ 'aaa' | pad: 5 }} <!-- ' aaa ' -->
{{ 'aaa' | pad: 5: 'b' }} <!-- 'baaab' -->Trims the string.
import { TrimPipe } from 'angular-pipes';{{ 'aaa' | trim }} <!-- 'aaa' -->
{{ 'aaa ' | trim }} <!-- 'aaa' -->
{{ ' aaa ' | trim }} <!-- 'aaa' -->Split a string into an array.
import { SplitPipe } 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 { ReplacePipe } from 'angular-pipes';This is the String#match() function, if you want to know more about the arguments, check the official documentation.
import { MatchPipe } from 'angular-pipes';This is the String#test() function, if you want to know more about the arguments, check the official documentation.
import { TestPipe } 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 { NewlinesPipe } 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 { CapitalizePipe } 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 { UpperFirstPipe } from 'angular-pipes';{{ 'hello world' | upperfirst }} <!-- 'Hello world' -->Template string.
import { TemplatePipe } from 'angular-pipes';{{ "Hello $1, it's $2" | template: 'world': 'me' }} <!-- 'Hello world, it's me' -->The encodeURI function.
import { EncodeURIPipe } from 'angular-pipes';The encodeURIComponent function.
import { EncodeURIComponentPipe } from 'angular-pipes';The decodeURI function.
import { DecodeURIPipe } from 'angular-pipes';The decodeURIComponent function.
import { DecodeURIComponentPipe } from 'angular-pipes';Repeats a string.
import { RepeatPipe } from 'angular-pipes';{{ 'a' | repeat: 2 }} <!-- 'aa' -->
{{ 'a' | repeat: 2: 'b' }} <!-- 'aba' -->Truncate a string.
Arguments: (size, suffix, preserve)
import { TruncatePipe } 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 { SlugifyPipe } 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 { StripTagsPipe } 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 { latinize } 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 { WrapPipe } 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 { WithPipe } 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 { ReverseStrPipe } from 'angular-pipes';{{ 'hello world' | reverseStr }} <!-- 'dlrow olleh' -->