fknop / angular-pipes

Useful pipes for Angular

Not actively maintained

angular-pipes

angular-pipes is a pipes library for Angular.

Changelog

Check out the changelog to check all the latest changes.

Contribute

Read the contributing guidelines

Pipes

You can find the documentations in the docs folder or on GitBook.

Collections (array)

• empty
• head
• initial
• join
• last
• tail
• uniq
• without
• intersection
• union
• range
• map
• pluck
• where
• firstOrDefault
• orderBy
• reverse
• count
• some
• every
• shuffle
• take
• takeUntil
• takeWhile
• drop
• deep
• chunk
• flatten

Boolean

• greater
• greaterOrEqual
• less
• lessOrEqual
• equal
• notEqual
• identical
• notIdentical
• isNull
• isUndefined
• isNil
• isNumber
• isString
• isFunction
• isArray
• isObject
• isDefined

Math

• bytes
• ceil
• floor
• round
• degrees
• radians
• random
• pow
• sqrt
• ordinal

Aggregate

• groupBy
• min
• max
• mean
• sum

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

Object

• keys
• toArray
• defaults

Install

npm

npm install angular-pipes --save

How to use

Check the documentation for how to import your pipes in your NgModule and how to use individual pipes.

Tests

npm install
npm test

License

MIT

angular-pipes's Issues

Slugify support for international characters

[ ] bug report
[x] feature request

Current behavior
I am trying to slugify a city name: Malmö
{{ 'Malmö' | slugify }} = malm

Expected behavior
I would expect it to replace the ö for an o
{{ 'Malmö' | slugify }} = malmo

Minimal reproduction of the problem with instructions
plnkr isn't loading right now, but simple to replicate. I have previously been using a function which does the replacement for you:

slugify(text) {
    if (text) {
      const specialChars = {'à': 'a', 'ä': 'a', 'á': 'a', 'â': 'a', 'æ': 'a', 'å': 'a', 'ë': 'e', 'è': 'e', 'é': 'e',
      'ê': 'e', 'î': 'i', 'ï': 'i', 'ì': 'i', 'í': 'i', 'ò': 'o', 'ó': 'o', 'ö': 'o', 'ô': 'o', 'ø': 'o', 'ù': 'o',
      'ú': 'u', 'ü': 'u', 'û': 'u', 'ñ': 'n', 'ç': 'c', 'ß': 's', 'ÿ': 'y', 'œ': 'o', 'ŕ': 'r', 'ś': 's', 'ń': 'n',
      'ṕ': 'p', 'ẃ': 'w', 'ǵ': 'g', 'ǹ': 'n', 'ḿ': 'm', 'ǘ': 'u', 'ẍ': 'x', 'ź': 'z', 'ḧ': 'h', '·': '-', '/': '-',
      '_': '-', ', ': '-', ': ': '-', ';': '-'};

      return text.toString().toLowerCase()
        .replace(/\s+/g, '-')           // Replace spaces with -
        .replace(/./g, (target, index, str) => specialChars[target] || target) // Replace special characters using the hash map
        .replace(/&/g, '-and-')         // Replace & with 'and'
        .replace(/[^\w\-]+/g, '')       // Remove all non-word chars
        .replace(/\-\-+/g, '-')         // Replace multiple - with single -
        .replace(/^-+/, '')             // Trim - from start of text
        .replace(/-+$/, '');             // Trim - from end of text
    } else {
      return false;
    }
  }

What is the motivation / use case for changing the behavior?
nicer slugs for urls, easier to read as they are closer to the originals

ng2 beta 0.16 changed how pipes work :(

pipes now take a variable number of arguments, and not an array that contains all arguments.

"aggregate functions" should be the name of the group for min, max, sum (etc)

https://en.wikipedia.org/wiki/Aggregate_function

• A super well known term that will boost instant underderstanding from people with SQL knowledge.

Also a highly attractive Angular feature deleted before Angular 1.0 :-(

Please suggest OrderBy usage for this Json

Hi,

This is not a Bug or issue. Please consider this as Info/Request

I have the below data with me in json format.

This is the list of comments. In this example 19 comments are there under items tag.

http://www.jsoneditoronline.org/?id=47b282c498505ed25869dc36f5f3bd58

Comments are sorted based on Date published.

Now on the Item Id 10th there are two replies to this comment.

I am looking for a way to order this reply based on publishedAt time.

Below is my html:
Here videoComments = the json data specified above

<ion-list>
  <ion-item *ngFor="let comment of videoComments">
    <!-- here i Print the details what is required , next if there are any reply i would like to show them-->   
    <div *ngIf="comment.snippet.totalReplyCount != 0">
      <ion-list>
        <ion-item *ngFor="let reply of comment.replies.comments | orderBy: 'publishedAt'"> 
          <!-- Above orderBy pipe is not working , may be my syntax is wrong -->
           <!-- I would like to show replies in ascending order of when it was submitted-->
          <!-- Details of replies will be shown here -->          
        </ion-item>
      </ion-list>
    </div>
  </ion-item>
</ion-list>

Your assistance is highly appreciated.

Pure pipes versions of impure pipes

I recommend merging with https://github.com/danrevah/ngx-pipes

I recommend merging with https://github.com/danrevah/ngx-pipes

Angular 2 Kitchen sink: http://ng2.javascriptninja.io
and source@ https://github.com/born2net/Angular-kitchen-sink
Regards,

Sean

Deep equal for collection pipes

AOT compilation fails

@fknop something is not working with AOT again, and the error message isn't telling me much

Here is a useful comment that might help dougludlow/ng2-bs3-modal#105 (comment)

Error: Unexpected value 'NgPipesModule' imported by the module 'AppM'
    at /workspace/vivien/frontend/node_modules/@angular/compiler/bundles/compiler.umd.js:17710:46
    at Array.forEach (native)
    at CompileMetadataResolver.getNgModuleMetadata (/workspace/vivien/frontend/node_modules/@angular/compiler/bundles/compiler.umd.js:17695:51)
    at addNgModule (/workspace/vivien/frontend/node_modules/@angular/compiler/bundles/compiler.umd.js:24285:60)
    at /workspace/vivien/frontend/node_modules/@angular/compiler/bundles/compiler.umd.js:24296:16
    at Array.forEach (native)
    at _createNgModules (/workspace/vivien/frontend/node_modules/@angular/compiler/bundles/compiler.umd.js:24295:28)
    at analyzeNgModules (/workspace/vivien/frontend/node_modules/@angular/compiler/bundles/compiler.umd.js:24174:16)
    at analyzeAndValidateNgModules (/workspace/vivien/frontend/node_modules/@angular/compiler/bundles/compiler.umd.js:24184:37)
    at AotCompiler.compileAll (/workspace/vivien/frontend/node_modules/@angular/compiler/bundles/compiler.umd.js:23923:20)
Compilation failed

When performing a build in Angular 6, compiler complains about not finding a module

When I perform an ng-build with the --prod flag under Angular 6 I see the following error. It seems to be related to this issue. Version is 7.2

Github link

ng build project --prod

ERROR in src/app/admin/customers/customer-details/customer-details.component.ts(7,29): error TS2307: Cannot find module 'angular-pipes/src/array/order-by.pipe'.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dist-mc: ng build mapcloud --prod --output-path ../server/portal/web/static/dist/en
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dist-mc script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\iain.hunter\AppData\Roaming\npm-cache_logs\2018-05-18T16_42_31_181Z-debug.log

Typo in "truncate" documentation

I'm submitting a ...

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request

https://github.com/fknop/angular-pipes/blob/master/docs/string.md#truncate

Current behavior

Usage

...
{{ 'Hello World, how is it going?' | truncate: 14: '...', true }} <!-- 'Hello World, how...' -->

Expected behavior

',' before the last pipe arguments should be ':'

Usage

...
{{ 'Hello World, how is it going?' | truncate: 14: '...': true }} <!-- 'Hello World, how...' -->

Minimal reproduction of the problem with instructions

N/A

What is the motivation / use case for changing the behavior?

This typo caused confusion with a colleague who just started on the project. He thought that there was something wrong with the pipe but it was just a typo in the documentation.

Bytes pipe: be able to change/set the output unit

I'm submitting a ...

[ ] bug report
[x] feature request

In some cases it will be great to have fixed output unit for bytes, for example: table where one of its columns represents bytes in fixed unit.

Travis CI with Karma

Support for Angular 2 final

Are there any plans to support Angular2 Final?

Migration to rc.5

Migration to rc.5 when it comes out:

• Create NgModule's for each category
• Create global NgModule that import each category

orderBy type number results in error

Hello,

im trying to use the orderBy pipe within an ngFor. But unfortunately I get an error if the value in the variable of the array is of type number

Tripleslash references

Trying build my project after including the pipes throws an error: "Exported external package typings file cannot contain tripleslash references."

The code is simple as:

import {TailPipe, HeadPipe} from 'angular-pipes';
@Component({
  selector: 'page',
  pipes: [TailPipe, HeadPipe],
  directives: [BannerComponent, PageLinkDirective],
  template: `{{list | head}}
    <spand *ngFor="let item of list | tail">{{item}}</span>
  `
})
export class Page extends BasePage {
  list = [1,2,3];
}

I'm building with Angular2 rc.1, angular-pipes 1.6.0, node 6.0.0, typings 0.8.1

Removing the tripleslashes from angular-pipes/index.ts solved it.

Warning with ngc compiler

Hi, with the new major version i got this warning message popping up if using the ngc compiler.

WARNING in ./~/angular-pipes/src/index.js
Cannot find SourceMap 'index.js.map': Error: Can't resolve './index.js.map' in '/home/tsm/Sites/deploy-fe/node_modules/angular-pipes/src'
 @ ./src/app/shared/modules/shared.module.ts 9:22-46
 @ ./src/compiled/src/app/app.module.ngfactory.ts
 @ ./src/main.browser.aot.ts

version used: "angular-pipes": "^5.0.9",

great lib... no sort?

great lib... no sort?

maybe add: https://plnkr.co/edit/DHLVc0?p=preview

regards

Sean

Documentation for aggregate group

Documentation for 1.4.0 pipes

missing 'first' pipe

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[X] feature request

Current behavior
No pipe returns the first element that matches a condition

Expected behavior
A new pipe, similar to 'where', that returns the first element that matches the condition
See .NET linq .First() https://msdn.microsoft.com/en-us/library/bb535050(v=vs.110).aspx

What is the motivation / use case for changing the behavior?
A more performant pipe than (arr | where:[cond])[0]

is this for angularJS or angular?

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request

Current behavior

Expected behavior

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

The pipe 'truncate' could not be found

I have not been able to make use of the library, it is not parsing the template...

[ x] bug report
[ ] feature request

Current behavior
Angular 6.

<mat-card-title>{{[ERROR ->]tag.name | truncate: 14: '...': true}}</mat-card-title>

app.module.ts:

import { NgArrayPipesModule, NgStringPipesModule } from 'angular-pipes';

imports: [
    ...
    NgArrayPipesModule,
    NgStringPipesModule
  

component.ts

import { TruncatePipe } from 'angular-pipes';

componente.html

<mat-card-title>{{tag.name | truncate: 14: '...': true}}</mat-card-title>

increase dep versions to support angular 7

Ionic2 - Can't exclude node_modules/angular-pipes/ from tslint

I have an issue with tslint on Ionic2 with this module. I'm using a lot of modules on Ionic2 and I never had to face this issue.

I have many rules on my tslint file, and tslint is not supposed to check the files into node_modules, but I have all errors from this module. Like this one :

 tslint: .../node_modules/angular-pipes/src/string/repeat.pipe.ts, line: 9
            Type declaration of 'any' loses type-safety. Consider replacing it with a more precise type, the empty type
            ('{}'), or suppress this occurrence.

       L9:  transform (input: any, times: number = 1, characters: string = ''): any {

I tried to remove it by using tsconfig or tslint files, but nothing can remove the module from tslint checking.

In the tsconfig :

  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules",
    "e2e",
    "**/*.spec.ts"
  ],

The path 'node_modules/angular-pipes/src/' contains 'src/**/*.ts', so it could be checked but normaly it's a relative path so it wouldn't. And the exclude rule should remove it...

So I don't know if you can try something, and if the problem is on your side, but I couldn't find anything on internet relative to that issue.

Many thanks.

Merging projects `angular-pipes` with `ngx-pipes`

https://github.com/danrevah/ngx-pipes

Contact me to see if we can merge our projects.
[email protected]

String Pipes, using regexp and 'check the official documentation.'

Thanks for all the awesome work creating this capability

some tips for use, didn't see in docs,
-In the help docs, where 'check the official documentation.' is referenced, this is referring to the official javascript documentation, the functions being used are standard javascript functions

-these functions still need to be translated into compatible pipe syntax
e.g. Javascript string.replace example: res = str.replace("AAA", "B") // res 'BAA'
Pipe equivalent = {{'AAA' | replace: 'A' : 'B'}} // returns 'BAA'

To use Regular Expressions you can't pass as strings, so if you want to do a global replace, this won't work:
{{'AAA' | replace: '/A/g' : 'B'}} // AAA (regex is treated as a string, no match found)
nor will this
{{'AAA' | replace: /A/g : 'B'}} // (generates console error)

Instead, create a typescript regexp variable in the associated component.ts:
public myRegex = new RegExp(/A/g);
Then use this in the pipe
{{'AAA' | replace: myRegex : 'B'}} // returns 'BBB'

Angular 6 compatibility

Plans for Angular 6 compatibility?

with pipe is not working if anything passed to it! and other...

**I'm submitting a bug

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request

Current behavior
Through the error "Parser Error: Unexpected token ',' at column 32 in [ {{ 'Sarmad et3rnal' | with: null,null,true }} ] in ng:///TheMagicsModule

Expected behavior
Just return the text

Minimal reproduction of the problem with instructions
I'm on Angular 6, I have installed this in hope to use the "with" pipe.
I have tested other pipes in the string module and they are working just fine except for
wrap: '{{': '}}'
Which is throwing a different error "Unexpected token Lexer Error: Unterminated quote..."

If needed more string examples, you can copy from....

If needed more string examples, you can copy from....
https://github.com/jprichardson/string.js

Angular 2 Kitchen sink: http://ng2.javascriptninja.io
and source@ https://github.com/born2net/Angular-kitchen-sink
Regards,

Sean

Feature Request: duration pipes

Thank you! I like this library! Did I miss something or why duration pipes are not included.
I would like to be able to convert for example milliseconds to minutes.
value_in_ms = 60000;
{{value_in_ms | duration: ms: min}} would print "1 min"

npm install fails on 'jspm install'

On version 2.0.0, npm tries to run jspm install on postinstall, failing if you don't have it installed.

Since I'm using webpack, that command is not necessary. I believe it should be an manual step for installation, as other packages do.

dynamic ordering

Hello,

I notice that if my data is modified the re-sorting (re-ordering) is not working. Is this normal ? Or what should I do for it to be the case.

Example:

private values = [ { name: 'a', order: 1}, { name: 'b', order: 2}, { name: 'e', order: 5} ];

`

{{ value.name }} = {{ value.order }}

`

onClick() { this.values[2].order = 4; }

The value is changed but the loop does not re-sort .

Thank you

Don't work

i'm follow document install and inport NgPipesModule in my AppModule, eg :

but i do it is no working, i'm find some Erorr info in Chrome console :

Environment :
Win7_x64
Webstore
Angular(2.2.0)
SystemJs

Errors when installing from npm

ERROR in [default] .../node_modules/angular-pipes/index.ts:1:0
Exported external package typings file cannot contain tripleslash references. Please contact the package author to update the package definition.

ERROR in [default] .../node_modules/angular-pipes/index.ts:1:0
File '.../node_modules/angular-pipes/node_modules/angular2/typings/browser.d.ts' not found.

It seems since you are distributing the source as typescript rather than the compiled JS with *.d.ts the package won't work with newer version of npm which flatten dependencies were possible.

This line: /// <reference path="node_modules/angular2/typings/browser.d.ts" /> in index.ts fails when angular2 is not located in node_modules/angular-pipes/node_modules/angular2.

Update to 2.0.0-rc

Limit Pipe?

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[X] feature request

Just wondering if there are plans to add a limit pipe for collections, so that you can reduce the size of the collection. An example of this would be if you ngFor over a large collection, you could do a limit pipe to reduce the output sized of the items.

If this already exists, please forgive me. I looked through the documentation and couldn't see it.

Split returned value is not comparable?

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request

Current behavior

After splitting a string, I tried to compare (==) the result but it always returns false

Expected behavior

To return true when values match

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Even if I put the same text on both it returns false after the text goes through the split pipe
{{ ('ss::aa::zz' | split: '::' : 1 ) == ('ss::aa::zz' | split: '::' : 1 ) }}
printing the results seems to be identical!

PS: plnkr template doesn't work!

Support for internationalization

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request

Current behavior
When the bytes pipe is used, the unit is displayed in English.

Expected behavior
Require a way to translate this into other languages. Does the library already support it?

v1.4.0 Notes

v1.4.0 Notes (not a release note)

I will bring new pipes soon. Here are some I can think about. If you have ideas, I'll take it 👍 .
Everything is probably not coming for next version. 1.4.0 will come at the latest end of next week. If anyone wants to contribute, you're welcome !

String

• capitalize
• upperfirst
• camelcase (next release)
• snakecase (next release)
• template
  • {{ 'This $1 the $2 pipe' | template: 'is': 'template' }}
• encodeURI
  • The encodeURI function
• encodeURIComponent
  • The encodeURIComponent function
• repeat
• truncate

Collections

• shuffle

Math

• random

Pure pipes

• Impure pipes can be a performance hit because the pipe is executed for every change detection. So, for those who don't need impure pipes, I'll probably do pure versions.
  #5

Aggregate group

• Issue: #3

Compilation error at V8.1.0

I'm submitting a ... (check one with "x")

[ x ] bug report => search github for a similar issue or PR before submitting
[ ] feature request

Current behavior

Update to V8.1.0 cause compilation error
Module not found: Error: Can't resolve 'angular-pipes'

Revert back to V8.0.0 problem gone

Expected behavior

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Errors when installing from npm

ERROR in [default] .../node_modules/angular-pipes/index.ts:1:0
Exported external package typings file cannot contain tripleslash references. Please contact the package author to update the package definition.

ERROR in [default] .../node_modules/angular-pipes/index.ts:1:0
File '.../node_modules/angular-pipes/node_modules/angular2/typings/browser.d.ts' not found.

It seems since you are distributing the source as typescript rather than the compiled JS with *.d.ts the package won't work with newer version of npm which flatten dependencies were possible.

This line: /// <reference path="node_modules/angular2/typings/browser.d.ts" /> in index.ts fails when angular2 is not located in node_modules/angular-pipes/node_modules/angular2.

Angular 5 compatibility

I'm suspecting that angular-pipes is not compatible with angular 5. Do you know whether it is or not?

Uncaught TypeError: core_1.OpaqueToken is not a constructor
at Object. (utils.ts:341)
at webpack_require (utils.ts:341)
at Object.module.exports (utils.ts:341)
at webpack_require (utils.ts:341)
at Object. (utils.ts:341)
at webpack_require (utils.ts:341)
at Object. (utils.ts:341)
at webpack_require (utils.ts:341)
at Object.lineBreak (utils.ts:341)
at webpack_require (utils.ts:341)

Sorry for the lack of other information but any guidance is appreciated.

number pipes hides the built-in DecimalPipe

I'm submitting a ... (check one with "x")

[X] bug report => search github for a similar issue or PR before submitting
[ ] feature request

Current behavior
when using angular-pipes, we can't use the built-in DecimalPipe anymore (also a number pipe)
https://angular.io/docs/ts/latest/api/common/index/DecimalPipe-pipe.html

Expected behavior
Either rename this number pipe, or give a workaround

--strictNullChecks

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request

Current behavior

When imported in a project with --strictNullChecks with.pipe.ts throws with Type 'null' is not assignable to 'string'
angular-pipes does not use --strictNullChecks.

Expected behavior

When imported in a project with --strictNullChecks no errors should be thrown.
Use --strictNullChecks and require pipes to be written for --strictNullChecks

Minimal reproduction of the problem with instructions
Clone master and add "strictNullChecks": true, to tsconfig.json.

What is the motivation / use case for changing the behavior?

Using angular-pipes in any project with --strictNullChecks throws compiler errors in dependencies. Also the type definitions do not include null and undefined types.
Code written for --strictNullChecks does not have any impact for projects not using this flag.

Possible drawbacks
Writing code for --strictNullChecks is slightly more expensive, however since pipes should be short and simple functions this should be acceptable.

The kilo prefix ('k') should be lower case

Issue type
[x] bug report
[ ] feature request

Current behavior

401060 | bytes results in 392 KB

Expected behavior
401060 | bytes results in 392 kB (lower-case k)

Rational
Symbol k is standardized as lowercase by International System of Units (SI)

It is kb for kilo-bit and kB for kilo-byte.

Error: Can't export pipe EmptyPipe from Ng2ArrayPipesModule as it was neither declared nor imported!

Hello,

I have this error when importing the NgModule ( Angular2 RC6 ).

Thanks and great job ;)

Bundling / packaging issue ? Comment here!

If you encounter a bundling or packaging issue, comment here!

I'm planning to change the bundling / packaging setup to include UMD bundles and tree-shakeable code. I prefer having a centralized issue for this.

Return unchanged if wrong type

Tests for encodeUri interchanged

I'm submitting a ...

[x] bug report
[ ] feature request

Current behavior

The tests for encodeUri and encodeUriComponent are probably interchanged.
encodeUri should encode a full URI while encodeUriComponent should only encode a sequence of chars.

Expected behavior

encodeUri should test with https://test.com.
encodeUriComponent should test with éà.