https://github.com/ko1ebayev/ngx-func-pipe
Angular typed pipe for efficient function calls in templates
https://github.com/ko1ebayev/ngx-func-pipe
angular change-detection pipe templates
Last synced: about 1 month ago
JSON representation
Angular typed pipe for efficient function calls in templates
- Host: GitHub
- URL: https://github.com/ko1ebayev/ngx-func-pipe
- Owner: ko1ebayev
- Created: 2024-08-26T21:50:58.000Z (10 months ago)
- Default Branch: master
- Last Pushed: 2024-10-08T09:33:50.000Z (8 months ago)
- Last Synced: 2025-02-22T05:31:40.403Z (4 months ago)
- Topics: angular, change-detection, pipe, templates
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/ngx-func-pipe
- Size: 171 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- fucking-awesome-angular - ngx-func-pipe - A simple and lightweight Angular pipe that allows you to call a function directly from your Angular templates. (Table of contents / Third Party Components)
- awesome-angular - ngx-func-pipe - A simple and lightweight Angular pipe that allows you to call a function directly from your Angular templates. (Table of contents / Third Party Components)
- trackawesomelist - ngx-func-pipe (⭐3) - A simple and lightweight Angular pipe that allows you to call a function directly from your Angular templates. (Recently Updated / [Oct 13, 2024](/content/2024/10/13/README.md))
README
# NgxFuncPipe
NgxFuncPipe is a simple and lightweight Angular pipe that allows you to call a function directly from your Angular templates. This utility is particularly useful when you need to invoke a function with arguments in your Angular templates.
### Features
- Standalone Pipe: The NgxFuncPipe is a standalone Angular pipe, meaning it can be used without being declared in an Angular module.
- Function Invocation in Templates: It allows you to invoke a function directly from your Angular templates with the required arguments.
- Type-safe Templates: Full support for Angular's type-safe templates, ensuring that function types and arguments are reflected in the template.
- Pure Pipe: The pipe is pure, meaning it only re-evaluates when its input values change, providing performance benefits.
### Installation
You can install this library using npm or yarn:
npm install ngx-func-pipe
yarn add ngx-func-pipe
### Type-safe Template Usage
Since Angular's templates are now type-safe, the function and its argument types will be reflected in the template, giving you full IntelliSense support:
```
import { Component } from '@angular/core';
import { NgxFuncPipe } from 'ngx-func-pipe';
@Component({
selector: 'app-math',
template: `
Sum: {{ foo | ngxFunc: 5: 10 }}
@if ((bar | ngxFunc: 'str': 1); as result) {
{{ result }}
}
`,
standalone: true,
imports: [NgxFuncPipe]
})
export class MathComponent {
foo(arg1: number, arg2: number): number {
return arg1 + arg2;
}
bar(arg1: string, arg2: number): boolean {
return arg1 && arg2;
}
}
```