Register pure/simple functions as Pipes

[luchsamapparat]

I'm submitting a...

[X] Feature request

Current behavior

I have various simple/pure functions (e.g. predicates, selectors, etc.) which are used throughout my application. When I want to use these functions in my components, I have to either (a) create a component method or (b) create a pipe which delegates to my function. This creates unnecessary boilerplate code.

I tried to create a factory method for creating pipes from functions, however that does not work with AOT.

export const ShoppingCartIsEmptyPipe = createPipe(shoppingCartIsEmpty);

https://gist.github.com/luchsamapparat/d535749f37def17ffdd312665a475cce#file-pipe-factory-ts

Expected behavior

I want to register a method as pipe without the need to define a separate class.

@Pipe({ name: shoppingCartIsEmpty })
export function shoppingCartIsEmpty(shoppingCart: ShoppingCart) {
    if (isNull(shoppingCart)) {
        return true;
    }

    return isEmpty(shoppingCart.items);
}

@NgModule({
    declarations: [
        shoppingCartIsEmpty
    ]
}
export class ShoppingCartModule {}

Minimal reproduction of the problem with instructions

Function:
https://github.com/luchsamapparat/cfha-client/blob/f0405838a32318d2b975019b1d63ae64419d2380/libs/shopping-cart-common/src/lib/shopping-cart.util.ts

Boilerplate Pipe to use Function in Template:
https://github.com/luchsamapparat/cfha-client/blob/f0405838a32318d2b975019b1d63ae64419d2380/libs/shopping-cart/src/lib/shopping-cart/shopping-cart-is-empty.pipe.ts

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

Easily define re-usable business behavior in simple/pure functions without any dependencies to angular. When there's the need to use that function, I can just register it as pipe.

[babeal]

or maybe a way to indicate in the component class that the function is pure.

@Pure()
public computeSum(a, b) {... }

[trotyl]

Also please note that there's no such function decorator syntax.

[sandangel]

@trotyl maybe there will be in the future ^^ https://github.com/Microsoft/TypeScript/wiki/Roadmap

[trotyl]

@sandangel There can only be decorator for Function Expression, but not possible for Function Declaration, which has already been discussed many time:

• Decorate a function tc39/proposal-decorators-previous#35
• Allow decorating functions tc39/proposal-decorators#40

[trotyl]

Seems related to #9761

[babeal]

I should have made mine more clear. I assumed the context the component class (a method of) which decorators can live not a random exported function. It reduces the utility but might still be nice. @trotyl

[angular-robot]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[angular-robot]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.

[alxhub]

Closing as this is not really possible at this time, because of the lack of top-level function declaration decorators. With Angular's upcoming "standalone" feature, standalone pipes imported into standalone components will significantly reduce the boilerplate required, and come pretty close to a lightweight pipe API.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}