{"id":13808395,"url":"https://github.com/nigrosimone/ng-generic-pipe","last_synced_at":"2025-10-15T05:36:32.486Z","repository":{"id":57310681,"uuid":"347299477","full_name":"nigrosimone/ng-generic-pipe","owner":"nigrosimone","description":"Generic pipe for Angular application for use a component method into component template","archived":false,"fork":false,"pushed_at":"2025-08-13T17:53:47.000Z","size":3342,"stargazers_count":21,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-09-19T19:47:11.358Z","etag":null,"topics":["angular","angular2","pipe"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/ng-generic-pipe","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nigrosimone.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"open_collective":"simone-nigro"}},"created_at":"2021-03-13T07:07:05.000Z","updated_at":"2025-08-13T17:53:50.000Z","dependencies_parsed_at":"2024-01-04T14:29:38.494Z","dependency_job_id":"f7d42e38-c1bd-4407-a0ee-46ef096d52df","html_url":"https://github.com/nigrosimone/ng-generic-pipe","commit_stats":{"total_commits":42,"total_committers":1,"mean_commits":42.0,"dds":0.0,"last_synced_commit":"c142db211c375a91a996452664827e12b6744454"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nigrosimone/ng-generic-pipe","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nigrosimone%2Fng-generic-pipe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nigrosimone%2Fng-generic-pipe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nigrosimone%2Fng-generic-pipe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nigrosimone%2Fng-generic-pipe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nigrosimone","download_url":"https://codeload.github.com/nigrosimone/ng-generic-pipe/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nigrosimone%2Fng-generic-pipe/sbom","scorecard":{"id":686826,"data":{"date":"2025-08-11","repo":{"name":"github.com/nigrosimone/ng-generic-pipe","commit":"9a434456488a443da5c426d9fd56a2700db7054e"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.9,"checks":[{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Maintained","score":9,"reason":"11 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 9","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Code-Review","score":0,"reason":"Found 0/30 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Vulnerabilities","score":0,"reason":"12 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-c75v-2vq8-878f","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-36fh-84j7-cv5h","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3","Warn: Project is vulnerable to: GHSA-776f-qx25-q3cc"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-22T01:09:13.526Z","repository_id":57310681,"created_at":"2025-08-22T01:09:13.526Z","updated_at":"2025-08-22T01:09:13.526Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279054839,"owners_count":26094415,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-15T02:00:07.814Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular2","pipe"],"created_at":"2024-08-04T01:01:41.695Z","updated_at":"2025-10-15T05:36:32.481Z","avatar_url":"https://github.com/nigrosimone.png","language":"TypeScript","funding_links":["https://opencollective.com/simone-nigro","https://www.paypal.com/paypalme/snwp"],"categories":["Third Party Components"],"sub_categories":["Pipes"],"readme":"# NgGenericPipe [![Build Status](https://travis-ci.org/nigrosimone/ng-generic-pipe.svg?branch=master)](https://travis-ci.com/github/nigrosimone/ng-generic-pipe) [![Coverage Status](https://coveralls.io/repos/github/nigrosimone/ng-generic-pipe/badge.svg?branch=master)](https://coveralls.io/github/nigrosimone/ng-generic-pipe?branch=master) [![NPM version](https://img.shields.io/npm/v/ng-generic-pipe.svg)](https://www.npmjs.com/package/ng-generic-pipe)\n\nGeneric pipe for Angular application for use a component method into component template.\n\n## Description\n\nSometime there is a need to use a component method into component template. Angular best practice says do not use method into html template, eg. `{{ myMethod(2) }}`. With NgGenericPipe you can use all your public component methods as pure pipe with the component scope (`this`), eg: `{{ 2 | ngGenericPipe: myMethod }}`.\n\nSee the [stackblitz demo](https://stackblitz.com/edit/demo-ng-generic-pipe?file=src%2Fapp%2Fapp.component.ts).\n\n## Features\n\n✅ More than 90% unit tested\u003cbr\u003e\n✅ Use all your component methods as pure pipe with component scope\u003cbr\u003e\n✅ Strong type check\u003cbr\u003e\n✅ Only 658 byte (with gzip compression)\u003cbr\u003e\n\n## Get Started\n\n*Step 1*: install `ng-generic-pipe`\n\n```bash\nnpm i ng-generic-pipe\n```\n\n*Step 2*: Use `ngGenericPipe` into your HTML template, eg.:\n\n```ts\nimport { Component } from '@angular/core';\nimport { NgGenericPipe } from 'ng-generic-pipe';\n\n@Component({\n  selector: 'app-root',\n  template: `\u003cdiv\u003e{{ 'Simone' | ngGenericPipe: sayHello }}\u003c/div\u003e`,\n  imports: [NgGenericPipe]\n})\nexport class AppComponent {\n    sayHello(name: string): string {\n      return `Hello! I'm ${name}.`; \n    }\n}\n```\n\nThere is also a `NgGenericDirective` if you need to use multiple time the same method into the template, eg.:\n\n```ts\nimport { Component } from '@angular/core';\nimport { NgGenericDirective } from 'ng-generic-pipe';\n\n@Component({\n  selector: 'app-root',\n  template: `\u003cdiv *ngGenericPipe=\"let fn; method: sayHello\"\u003e{{ fn('Simone') }} {{ fn('Mario') }} {{ fn('Luigi') }}\u003c/div\u003e`,\n  imports: [NgGenericDirective]\n})\nexport class AppComponent {\n    sayHello(name: string): string {\n      return `Hello! I'm ${name}.`; \n    }\n}\n```\n\n## API\n\n`ngGenericPipe` need to pipe on a value. The value become the first argument of the function called by `ngGenericPipe`, eg.:\n\n```ts\n'Hello world!' | ngGenericPipe: writeMessage\n```\n\nis translated into:\n\n```ts\nwriteMessage('Hello world!')\n```\n\nYou can pass, multiple parameter in this way, eg.:\n\n```ts\n'Hello world!' | ngGenericPipe: writeMessage:'Simone'\n```\n\nis translated into:\n\n```ts\nwriteMessage('Hello world!', 'Simone')\n```\n\nand with more parameters, eg.:\n\n```ts\n'Hello world!' | ngGenericPipe: writeMessage:'Simone':'Foo':'Bar':'Baz'\n```\n\nis translated into:\n\n```ts\nwriteMessage('Hello world!', 'Simone', 'Foo', 'Bar', 'Baz')\n```\n\nBecause `ngGenericPipe` is a pure pipe, the method is memoized. This means that the pipe transform the html only if an argument change. You can force the change by passing and additional parameter that change when you need a repaint (see the example below \"Call component method with component scope and force change detection\n\").\n\n## Strong type check\n\n`ngGenericPipe` has strong type checking\n\n![alt text](https://raw.githubusercontent.com/nigrosimone/ng-generic-pipe/master/help.gif)\n\n## Examples\n\nBelow there are some examples of use case.\n\n### Example: Call component method with component scope\n\nYou can call from template a component method `test(x: number)` and access to the component scope (`this`), eg.:\n\n```ts\nimport { Component } from '@angular/core';\nimport { NgGenericPipe } from 'ng-generic-pipe';\n\n@Component({\n  selector: 'app-root',\n  template: '\u003cdiv\u003e{{ 3 | ngGenericPipe: test }}\u003c/div\u003e',\n  imports: [NgGenericPipe]\n})\nexport class AppComponent {\n\n    public y: number = 2;\n\n    test(x: number): number {\n      return x * this.y; \n    }\n}\n```\n\n### Example: Call component method with component scope and multiple parameters\n\nYou can call from template a component method `test(x: number, z: number)` and access to the component scope (`this`), eg.:\n\n```ts\nimport { Component } from '@angular/core';\nimport { NgGenericPipe } from 'ng-generic-pipe';\n\n@Component({\n  selector: 'app-root',\n  template: '\u003cdiv\u003e{{ 3 | ngGenericPipe: test:3 }}\u003c/div\u003e',\n  imports: [NgGenericPipe]\n})\nexport class AppComponent {\n\n    public y: number = 2;\n\n    test(x: number, z: number): number {\n      return x * this.y * z; \n    }\n}\n```\n\n### Example: Call component method with component scope and no parameters\n\nYou can call from template a component method `test()` and access to the component scope (`this`), eg.:\n\n```ts\nimport { Component } from '@angular/core';\nimport { NgGenericPipe } from 'ng-generic-pipe';\n\n@Component({\n  selector: 'app-root',\n  template: '\u003cdiv\u003e{{ undefined | ngGenericPipe: test }}\u003c/div\u003e',\n  imports: [NgGenericPipe]\n})\nexport class AppComponent {\n\n    public y: number = 2;\n\n    test(): number {\n      return this.y; \n    }\n}\n```\n\n### Example: Call component method with component scope and force change detection\n\nYou can call from template a component method `test()` and access to the component scope (`this`), eg.:\n\n```ts\nimport { Component } from '@angular/core';\nimport { NgGenericPipe } from 'ng-generic-pipe';\n\n@Component({\n  selector: 'app-root',\n  template: `\n    \u003cdiv\u003e{{ undefined | ngGenericPipe: test:i }}\u003c/div\u003e\n    \u003cbutton (click)=\"onUpdate()\"\u003eUpdate\u003c/button\u003e`,\n  imports: [NgGenericPipe]\n})\nexport class AppComponent {\n\n    public y: number = Date.now();\n    public i: number = 0;\n\n    test(): number {\n      return this.y; \n    }\n\n    onUpdate(){\n      this.i++;\n    }\n}\n```\n\n### Example: Call observable component's method\n\nYou can call from template a component's method `testAsync()` that return observable, eg.:\n\n```ts\nimport { Component } from '@angular/core';\nimport { NgGenericPipe } from 'ng-generic-pipe';\n\n@Component({\n  selector: 'app-root',\n  template: `\u003cdiv\u003e{{ 'hello!' | ngGenericPipe: testAsync | async }}\u003c/div\u003e`,\n  imports: [NgGenericPipe]\n})\nexport class AppComponent {\n\n    testAsync(value: string): Observable\u003cstring\u003e {\n      return of(value);\n    }\n\n}\n```\n\n## Support\n\nThis is an open-source project. Star this [repository](https://github.com/nigrosimone/ng-generic-pipe), if you like it, or even [donate](https://www.paypal.com/paypalme/snwp). Thank you so much!\n\n## My other libraries\n\nI have published some other Angular libraries, take a look:\n\n - [NgSimpleState: Simple state management in Angular with only Services and RxJS](https://www.npmjs.com/package/ng-simple-state)\n - [NgHttpCaching: Cache for HTTP requests in Angular application](https://www.npmjs.com/package/ng-http-caching)\n - [NgLet: Structural directive for sharing data as local variable into html component template](https://www.npmjs.com/package/ng-let)\n - [NgForTrackByProperty: Angular global trackBy property directive with strict type checking](https://www.npmjs.com/package/ng-for-track-by-property)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnigrosimone%2Fng-generic-pipe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnigrosimone%2Fng-generic-pipe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnigrosimone%2Fng-generic-pipe/lists"}