Installations

npm install ngx-function-expression

Developer Guide

BETA

Typescript

No

Module System

ESM

Node Version

18.14.2

NPM Version

9.5.0 Score

67.1

Supply Chain

87.3

Quality

77.6

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

0

Total

20

Closed

20

Issues

Open

0

Total

0

Closed

0

Releases

Unable to fetch releases

Languages

2

TypeScript

JavaScript

TypeScript (84.92%)

JavaScript (15.08%)

Developer

nrauschcom

Download Statistics

Total Downloads

35,270

Last Day

2

Last Week

223

Last Month

824

Last Year

6,304

GitHub Statistics

MIT License

6 Stars

51 Commits

1 Forks

3 Branches

1 Contributors

Updated on Dec 20, 2024

Bundle Size

2.08 kB

Minified

666.00 B

Minified + Gzipped

Bundlephobia

Maintainers

1

View All 1 Contributors

Package Meta Information

Latest Version

17.0.1

Package Id

ngx-function-expression@17.0.1

Unpacked Size

45.68 kB

Size

13.13 kB

File Count

21

NPM Version

9.5.0

Node Version

18.14.2

Published on

May 20, 2024

Total Downloads

Cumulative downloads

Total Downloads

35,270

Last Day

0%

2

Compared to previous day

Last Week

-6.3%

223

Compared to previous week

Last Month

-7%

824

Compared to previous month

Last Year

-2%

6,304

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

1

tslib

Peer Dependencies

2

@angular/common @angular/core

Performant Pure Function Calls in Angular Templates

Warning: For Angular Versions < 13, please use ngx-function-expression@^2.0.0, because the package is Ivy-only as of Dec 2021.

Using Functions in Angular Templates is a double-edged sword.

While you can significantly reduce your template code by putting logic in component methods, this idea comes with its own pitfalls: Because you can't mark a method as pure, Angular will keep calling that method in every change detection cycle, waiting for the outputs to change, resulting in a huge amount of function calls.

By using ngx-function-expression, you are allowing Angular to memoize the result of your function calls as long as the parameters don't change.

This library comes with the following benefits:

Component-scoped method calls with the correct "this" context
Simple usage with any kind of methods and parameters
Type-safe template usage

Examples

Applying Component Methods in the Template

1@Component({
2  template: '{{pow | fnApply:[3, 2]}}' // will render '9'
3})
4class TestComponent {
5    public pow(base: number, exponent: number): number {
6        return Math.pow(base, exponent);
7    }
8}

Obviously, this could also be achieved by implementing a PowerPipe or precalculating the values in the component rather than in the template, and, most of the time, this is exactly what you should do!

But in reality, people will not write a pipe for every operation, or some methods are better contained in a component to access the context of that component.

Dynamically Creating a Stream of Data

As with any Angular pipe, you can chain them together to receive exactly the results you want.

1@Component({
2  template: `Explosion in {{createCountdown | fnApply | async}}`
3})
4class TestComponent {
5  createCountdown(): Observable<number> {
6    return interval(1000).pipe(take(5), map(i => 5 - i));
7  }
8}

When looking at this example, note that using {{createCountdown() | async}} would result in the AsyncPipe subscribing to a whole new observable in every tick, keeping the countdown on 5 forever.
Using fnApply will call the method exactly once and then listen to changes on the returned observable using AsyncPipe.

Just imagine you have some XHR request or costly computations in the observable you're subscribing to...

You can check out more examples and the full README over at GitHub

Get Started!

Run npm install ngx-function-expression
Add the FunctionExpressionModule to your application and use the pipes fnApply and fnMethod in your templates.

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

SAST

Determines if the project uses static code analysis.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

1.7

/10

Last Scanned on 2025-04-28

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More