[Feature request]: creating a local pipe in component for template

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

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    original: {{ msg }} 
    reverse: {{ msg | reverse }}   
  `
})
export class AppComponent  {
  public msg = 'Angular';
}

reverse.pipe.ts

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

@Pipe({name: 'reverse'})
export class ReversePipe implements PipeTransform {
  public transform(value: string): string {
    return value.split('').reverse().join('');
  }
}

Expected behavior

I. First expected

import { PipeLocal, Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    original: {{ msg }} 
    reverse: {{ msg | reverse }}      
  `
})
export class AppComponent  {
  public msg = 'Angular';
  
  @PipeLocal()
  public reverse(value: string) {
    // pure invoke function in template
    return value.split('').reverse().join('');
  }

}

II. Second expected

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

@Pipe({
  name: 'reverse', 
  provideIn: 'root'
})
export class ReversePipe implements PipeTransform {
  public transform(value: string): string {
    return value.split('').reverse().join('');
  }
}

I would also like to have provideIn for pipe. Because I can have many utilities and every time I import them tires.

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

• Many do not understand that poor performance, if directly done so

original: {{ msg }}
reverse: {{ reverse(msg) }}

• According to statistics, very rarely projects are created by pipes

• Quickly create piped methods

@StephenFluin @mhevery @trotyl Do you think this is possible?

[lazarljubenovic]

I’d like to see local pipes as well, but I disagree with the rationale – it seems to suggest that pipes are the way to use pure functions in templates to prevent rapid invocation on every CD cycle. Pipes are pure, yes, but that doesn’t mean that everything that we want to be pure should be solved by a pipe. Pipes should be used for end-user-friendly formatting of data (decimal pipe, date pipe, currency pipe), not for arbitrary invocation of pure functions.

The way I see it, this proposal asks about a way to define pure functions, but (wrongly, in my opinion) assumes that pipes are the way to go.

Instead of pipes, why don’t we allow this:

  @Pure()
  public reverse(value: string) {
    return value.split('').reverse().join('')
  }

Then, in the template, we can just do, as always,

{{ reverse(msg) }}

but without the degrading performance implications.

---

When looked from this perspective, I don’t think that you often actually want a local pipe. A pipe should be universal and should be able to format data from everywhere in the app – there should be little reason to tie it to one specific component. It’s not pipes that we need, it’s pure functions.

[BAM5]

Just thought of this elegant little solution to the “pure function” issue. It’s a good workaround for now. Actually, now that I think about it it somewhat solves the whole feature request since with this method you can now defer a pipe call to whatever function you want. You could even modify the pureCall pipe so it will defer to a class instance generated by the passed function if you needed a stateful transform pipe (although that would most likely defeat the whole purpose of making it a pipe since stateful transform sounds like “impure” to me).

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

@Pipe({ name: 'pureCall' })
export class PureCallPipe implements PipeTransform {
	transform(func:Function, ...args:any[]):any {
		return func(...args);
	}
}

And can be used like so

@Component({
	selector: 'app-root',
	template: `<ul><li *ngFor="let hash in imageHashes">{{hashToFile|pureCall:hash:'frank'}}</li></ul>`,
})
export class AppRoot{
	imageHashes:string[] = ['fakehash', 'stillfake', 'whyareyoulookinghere-stillsuperfake'];
	
	hashToFile(imageHash:string, name:string):string{
		return `/user/${name}/${imageHash}.jpg`;
	}
}

Enjoy!