Giter Club home page Giter Club logo

ng-pipes's Introduction

ng-pipes   NPM version Build status License Join the chat at https://gitter.im/ng-pipes/Lobby

a8m/angular-filter for Angular (2+)

For the AngularJS version of this module, please see angular-filter.

Installation

npm install --save ng-pipes

or

yarn add ng-pipes

Get Started

There are 3 ways of adding ng-pipes to your project:

  1. Import all pipes
  2. Import pipes by module
  3. Declare specific pipes

Import all pipes

import { NgPipesModule } from 'ng-pipes';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    NgPipesModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
<h1>
  {{ title | reverse }}
</h1>

Import pipes by module

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 { }
<h1>
  {{ title | reverse }}
</h1>

Declare specific pipes

import { ReversePipe, CeilPipe, ... } from 'ng-pipes';
// ...

@NgModule({
  declarations: [
    AppComponent, ReversePipe, CeilPipe, ...
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
<h1>
  {{ title | reverse }}
</h1>

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 is preferred.

Submitting a Pull Request (PR)

  1. Clone the project via:
$ git clone https://github.com/a8m/ng-pipes.git
  1. Make your changes in a new git branch:
$ git checkout -b my-cool-branch master
  1. Add your changes, including appropriate test cases.

  2. Push your branch to Github.

  3. Create a PR to master.

ng-pipes's People

Contributors

a8m avatar dependabot[bot] avatar gitter-badger avatar rafaelss95 avatar stevevanopstal avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

ng-pipes's Issues

how to filterBy collection instead of one search string

hy, is it possible to filterBy the collection instead of one string? I`m talking about the third parameter in the form of [filterBy:properties:search:strict]. I want to extract objects by several id, e.x. I have objects with ids 1,2,3,4,5,6 and my visitor may select only several ids to see, say, 4,5,6. So, how to get only the objects by selected several id numbers?

PICK NOT WORK

Hi I am using PICK PIPE but not work have the following code:

this.collection = [{id:1,name:"Juan"},{id:2,name:"Luis"}];

let promSele = new PickPipe().transform(this.collection, "id>0");

console.log(promSele);
// print []

And this code print an array empty.

format the project

Since this project is just a "copy-paste"(via code) of angular-filter we need to format a bit the output, because it looks bad.
If you are familiar with good format tool, don't hesitate to make a PR.

update: tsfmt looks promising.

Pipes not available in public api

The following currently doesn't seem to work:

import { RepeatPipe } from 'ng-pipes';

importing via modules is still possible.

I'm taking a look at it.

'node_modules/ng-pipes/src/boolean/index.ts' is not under 'rootDir'

Could you not publish the .ts files? currently this causes issues when compiling the library in another library. Normally when you publish your library, you do not publish directly the ts files, unless you leave there in a src folder, and the .d.ts, .js etc. go in a different folder

Ng-pipes is not available as a built module

Current Behaviour

UNPKG currently does not provide a module, but the index file:
https://unpkg.com/ng-pipes

unpkg is a fast, global content delivery network for stuff that is published to npm.

Desired Behaviour

A module can be made available so the user doesn't need to bundle ng-pipes it into their own code.

Extra information

  1. build ng-pipes into a module (UMD)
  2. minify it (optional)
  3. add it to git in a ./dist or ./build folder
  4. add the location of the module to the main parameter of package.json:
{
...
  "main": "build/ng-pipes[.min].js",
...
}

Add documentation

I don't think we need to maintain two READMEs. but until we decide on a solution for this, I want to add to the README the documentation from angular-filter (with few changes).

Any thoughts? @SteveVanOpstal @rafaelss95

Cannot use with a project enabled noUnused{Locals,Parameter}

TypeScript 2.0 - Flag unused declarations with --noUnusedParameters and --noUnusedLocals

I tried [email protected] with my project whose tsconfig.json contains the lines below.

"unUnusedLocals": true,
"unUnusedParameters": true,

I got the following errors and cannot get success status from the compiler.

node_modules/ng-pipes/src/collection/chunk-by.pipe.ts(2,10): error TS6133: 'isArray' is declared but never used.
node_modules/ng-pipes/src/collection/defaults.pipe.ts(26,37): error TS6133: 'i' is declared but never used.
node_modules/ng-pipes/src/collection/first.pipe.ts(2,55): error TS6133: 'isUndefined' is declared but never used.
node_modules/ng-pipes/src/collection/group-by.pipe.ts(2,28): error TS6133: 'getFirstMatches' is declared but never used
node_modules/ng-pipes/src/collection/group-by.pipe.ts(2,45): error TS6133: 'isNumber' is declared but never used.
node_modules/ng-pipes/src/collection/last.pipe.ts(2,55): error TS6133: 'isUndefined' is declared but never used.
node_modules/ng-pipes/src/collection/order-by.pipe.ts(2,10): error TS6133: 'isArray' is declared but never used.
node_modules/ng-pipes/src/collection/order-by.pipe.ts(2,19): error TS6133: 'toArray' is declared but never used.
node_modules/ng-pipes/src/collection/order-by.pipe.ts(2,28): error TS6133: 'isUndefined' is declared but never used.
node_modules/ng-pipes/src/collection/range.pipe.ts(2,10): error TS6133: 'toArray' is declared but never used.
node_modules/ng-pipes/src/collection/range.pipe.ts(2,19): error TS6133: 'isArray' is declared but never used.
node_modules/ng-pipes/src/collection/search-field.pipe.ts(2,19): error TS6133: 'isString' is declared but never used.
node_modules/ng-pipes/src/collection/to-array.pipe.ts(2,10): error TS6133: 'isArray' is declared but never used.
node_modules/ng-pipes/src/math/sum.pipe.ts(2,10): error TS6133: 'isNumber' is declared but never used.
node_modules/ng-pipes/src/string/latinize.pipe.ts(2,10): error TS6133: 'isString' is declared but never used.
node_modules/ng-pipes/src/string/latinize.pipe.ts(2,20): error TS6133: 'isUndefined' is declared but never used.
node_modules/ng-pipes/src/utils/parse.ts(60,11): error TS6133: 'keysLen' is declared but never used.

How to orderBy and ignore case

Using the current orderBy pipe, if you collection looks like:

[{
  name: 'a'
}, {
  name: 'b'
}, {
  name: 'A'
}, {
  name: 'B'
}]

then the sorted result by name will be:

[{
  name: 'A'
}, {
  name: 'B'
}, {
  name: 'a'
}, {
  name: 'b'
}]

How to avoid this without adding an extra lowered case property?

Pipe aliases

In recent events the SnakeCasePipe is renamed to UnderscorePipe (a103dd8).

In my opinion the name SnakeCasePipe makes a lot of sense.
@rafaelss95 apparently thinks UnderscorePipe to be more suitable.

But looking at it from the user perspective both are equally correct names.
I suggest we allow multiple names for the same pipes by creating aliases.

Alias suggestions

capitalize -- ucFirst
snakeCase -- underscore
camelCase -- camelize

Include only necessary pipes

Not an issue per say, but I think you could mention in the readme that one could only include specific pipes rather than loading the entire library and adding unnecessary bytes to the file.

Personally I use like this

import { FilterByPipe } from 'ng-pipes/src/collection/filter-by.pipe';

@NgModule({
  declarations: [
    FilterByPipe
  ]
})
export class AppModule { }

ng build --prod fails

Module build failed: Error: node_modules\ng-pipes\src\boolean\index.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format (https://goo.gl/jB3GVv).

ng-pipes: 0.1.2
angular/cli: 1.7.3
angular/compiler-cli: ~5.2.9

Omit in Array

Hi,
i would like use omit filter for array but i have problems when i pass the method of my class that must filter the array

This is the html code
*ngFor="let p of pages | omit: omitItem"

This is the method of my class
omitItem(page) {
}

I have compilation errors.

Why? There are no examples about ng-pipes with arrays and custom methods.

Thanks.

support for nativescript

is this module supported on nativescript? if not it would be great to have that available for nativescript as well

WherePipe

Hi,

I need filter array of Object with OR for example

Where:' Field=='A' OR FIELD=='B'';

is there anyway ??

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.