[FEATURE] callback pipe to help make logic in template more performant

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

Current behavior

NA

Expected behavior

A pipe would expect a callback function as the first argument, then run that function on the value e.g.

component

@Component(...)
export class SomeComponent {
    addWorld(value) {
        return value + ' world';
    }
}

template

{{ 'hello' | callback : addWorld }}

Minimal reproduction of the problem with instructions

Super duper easy to implement. I am happy to add if approved.

import { Pipe, PipeTransform } from '@angular/core';

/**
 * pipe allows clean component specific transformation of value without having to create a seperate pipe
 * for each set of transformation logic to improve performance. also useful for when same logic needed in template and component.ts
 * @param value the value to transform
 * @param callback the transformation function to run on value
 * @example
 * // if we were to run this callback directly in the template performance would suffer. YAY pipes!!!
 * {{ 'hello' | callback : (value) => value + ' world' }}
 */
@Pipe({
  name: 'callback'
})
export class CallbackPipe implements PipeTransform {

  transform(value: any, callback: (val: any) => {} ): any {
    return callback(value);
  }

}

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

Get the performance benefits of pipes while allowing user to make use of component logic. Which would mitigate the duplication of code across component and pipe when logic is needed in both the template and component.ts file.

This could be taught as best practice to help new users avoid putting logic directly in template e.g.

template

{{addWorld('hello')}}

Environment

Angular version: X.Y.Z


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

[ericmartinezr]

Wouldn’t this also be partially solved by https://github.com/angular/angular/issues/25976 ?

[pkozlowski-opensource]

I think that this is duplicate of #25976 (maybe not in the proposed impl details, but in the need to address). Let’s move the discussion to #25976 (I’ve just provided some input in there).