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' -->