Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/a8m/ng-pipes
Bunch of useful pipes for Angular2 (with no external dependencies!)
https://github.com/a8m/ng-pipes
angular angular-filters filter ng-pipes pipes
Last synced: 18 days ago
JSON representation
Bunch of useful pipes for Angular2 (with no external dependencies!)
- Host: GitHub
- URL: https://github.com/a8m/ng-pipes
- Owner: a8m
- License: mit
- Created: 2016-12-16T14:37:25.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-08T17:31:42.000Z (about 2 years ago)
- Last Synced: 2024-11-17T07:00:37.081Z (26 days ago)
- Topics: angular, angular-filters, filter, ng-pipes, pipes
- Language: TypeScript
- Homepage: https://a8m.github.io/ng-pipes/
- Size: 2.27 MB
- Stars: 118
- Watchers: 7
- Forks: 24
- Open Issues: 32
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-angular-components - ng-pipes - Bunch of useful pipes for Angular2 (with no external dependencies!). (Uncategorized / Uncategorized)
- awesome-angular - ng-pipes - Bunch of useful pipes for Angular2 (with no external dependencies!). (Uncategorized / Uncategorized)
- awesome-angular-components - ng-pipes - Bunch of useful pipes for Angular2 (with no external dependencies!). (Uncategorized / Uncategorized)
README
# ng-pipes [![NPM version][npm-image]][npm-url] [![Build status][travis-image]][travis-url] [![License][license-image]][license-url] [](https://gitter.im/ng-pipes/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
> [a8m/angular-filter](https://github.com/a8m/angular-filter) for Angular (2+)
For the AngularJS version of this module, please see [angular-filter](https://github.com/a8m/angular-filter).
Installation
------------
```sh
npm install --save ng-pipes
```
or
```sh
yarn add ng-pipes
```
Get Started
------------
There are 3 ways of adding __ng-pipes__ to your project:
1. [Import all pipes](#all)
2. [Import pipes by module](#mod)
3. [Declare specific pipes](#spe)
```ts
import { NgPipesModule } from 'ng-pipes';
@NgModule({
declarations: [
AppComponent
],
imports: [
NgPipesModule
],
bootstrap: [AppComponent]
})
export class AppModule { }
```
```html
{{ title | reverse }}
```
#### Import pipes by module
```ts
import {BooleanPipesModule, CollectionPipesModule, MathPipesModule, ObjectPipesModule, StringPipesModule} from 'ng-pipes';
@NgModule({
declarations: [
AppComponent
],
imports: [
BooleanPipesModule, // imports all pipes of the boolean module
CollectionPipesModule, // imports all pipes of the collection module
MathPipesModule, // imports all pipes of the math module
ObjectPipesModule, // imports all pipes of the object module
StringPipesModule // imports all pipes of the string module
],
bootstrap: [AppComponent]
})
export class AppModule { }
```
```html
{{ title | reverse }}
```
#### Declare specific pipes
```ts
import { ReversePipe, CeilPipe, ... } from 'ng-pipes';
// ...
@NgModule({
declarations: [
AppComponent, ReversePipe, CeilPipe, ...
],
bootstrap: [AppComponent]
})
export class AppModule { }
```
```html
{{ title | reverse }}
```
Contributing
------------
- Any contribution is appreciated.
- If you are planning to add a new pipe (or any other feature), please open an issue before.
- Angular [Commit Message Format](https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit) is preferred.
#### Submitting a Pull Request (PR)
1. Clone the project via:
```
$ git clone https://github.com/a8m/ng-pipes.git
```
2. Make your changes in a new git branch:
```
$ git checkout -b my-cool-branch master
```
3. Add your changes, including appropriate test cases.
4. Push your branch to Github.
5. Create a PR to master.
[npm-image]: https://img.shields.io/npm/v/ng-pipes.svg?style=flat-square
[npm-url]: https://npmjs.org/package/ng-pipes
[travis-image]: https://img.shields.io/travis/a8m/ng-pipes.svg?style=flat-square
[travis-url]: https://travis-ci.org/a8m/ng-pipes
[license-image]: http://img.shields.io/npm/l/ng-pipes.svg?style=flat-square
[license-url]: LICENSE