External pipes (filters as called in Angular 1) for Angular 2 template engine
1- via NPM
npm install ng2-filters
2- via Yarn
yarn add ng2-filters
- You can add pipes globally to your app, in your
app.module.ts
file:
import { CapitalizePipe } from 'ng2-filters';
@NgModule({
declarations: [
CapitalizePipe
],
...
})
- Or you can add per component:
import { CapitalizePipe } from 'ng2-filters';
@Component({
pipes: [ CapitalizePipe ]
})
The cool thing about Angular pipes is that they are easy to use, here's an example:
<p>{{ user.name | capitalize }}</p>
And that's it! wait for Angular to render the results and keep your eye on the console in case some error occurred.
Here's a list of availabe pipes:
-
capitalize
: it will turn every first letter in a word into a capital letter (the expected value isString
type, other than that an error will be raised) -
tofixed
: based on thetoFixed()
method (Default decimals number is 2, the expected value isNumber
type, other than that an error will be raised) -
substr
: based on thesubstr()
medthod (the expected value isString
type, other than that an error will be raised)) -
total
: it will return the total for an array of numbers (An error will be raised if one value is not typeNumber
) -
qoute
: it will add a qoutation mark to the value (It will turn the given value into aString
) -
replace
: this pipe will the replace the first matching string, example:{{ timestring | replace: 'T': ' ' }}
. Note: Default replace value is empty string""
. -
replaceAll
: work likereplace
but the difference that it will replace every matching string.
This project is under the MIT license.