Force a pipe to be recomputed from within its code

[mgirolet-gl]

Which @angular/* package(s) are relevant/related to the feature request?

core

Description

As per suggested by #15041 in 2017, it would be convenient to be allowed to trigger pipes manually for computation.

#15041 was however closed:

Looking into this (and similar) issues it sounds like we are looking for using a pipe as something akin to computed properties. We do consider a more generic solution. Since we are getting multiple issues / feature requests around computed properties, we've opened a canonical issue #47553 to track this use-case.

#47553 has since been closed too:

We do have computed properties with signals now!

Yet, I don't see any way signals can be used to solve #15041, which has since been locked for inactivity.

Here's a practical use case, as an example:

@Pipe({
    name: 'sortByTranslation'
})
export class SortByTranslationPipe implements PipeTransform, OnDestroy {
    private translateSub: any = null;

    constructor(private readonly translateService: TranslateService) { }

    ngOnDestroy(): void {
        if (this.translateSub !== null) this.translateSub.unsubscribe();
    }

    transform(input: string[]): any {
        input.sort((a: string, b: string) => {
            // Yes, this is heavily unoptimized, we recalculate translations on every comparison, you might want to use a dictionnary or something.
            // It doesn't matter, though: point is, you get data from an external source, and that data might change at any time.
            const aV = this.translateService.instant(a);
            const bV = this.translateService.instant(b);

            if (aV < bV)
                return -1;
            else if (aV > bV)
                return 1;
            else
                return 0;
        });

        if (this.translateSub === null) {
            this.translateSub = this.translateService.onLangChange.subscribe((value) => {
                /* TODO: manually trigger the pipe to be refreshed here!!! */
            });
        }
    }
}

In this case, we want to sort an array of translation keys alphabetically, depending on their actual translation value provided by some resource (here, a translation service).

However, if we change of language, we'd want to recompute the result of this pipe's transform function, which we can't do as of right now:

• ChangeDetectorRef.markForCheck() and ChangeDetectorRef.detectChanges() do not detect any change and therefore won't refresh the pipe
• There's no function in the PipeTransform interface that'd allow a forced recomputation

I'm using translations as an example here, but this could be applied to any callback-based data received from an external service of any kind.

Proposed solution

Either add a function / event emitter to pipes to refresh it, or add a public function to its ChangeDetectorRef to force it to be marked as changed, even if it doesn't detect changes by itself.

Alternatives considered

This could supposedly be solved by adding pure: false, but this would NOT be a good alternative: it would result in maaaaany unnecessary computations (or even "too many recursion" errors in some cases)

We don't want to recalculate data on the slightest change of anything, only when some callback we got control of is executed.

[JeanMeche]

We likely won't change the way Pipes work today, a pure pire runs when the input value changes.

The alternative we're suggesting is using a computed instead of the pipe. Care to explain why you think that a computed won't be working here?

Also a related discussion #56401

[e-oz]

This could supposedly be solved by adding pure: false

Your pipe is impure, therefore you must set pure: false.

but this would NOT be a good alternative: it would result in maaaaany unnecessary computations (or even "too many recursion" errors in some cases)

But your example has this issue anyway:

Yes, this is heavily unoptimized, we recalculate translations on every comparison

You could optimize performance or return a signal from transform() and declare your pipe as pure - the signal you returned will remain the same, just its value will change over time.

[mgirolet-gl]

The alternative we're suggesting is using a computed instead of the pipe. Care to explain why you think that a computed won't be working here?

Pipes are both more convenient and more performant: if we take again that SortByTranslationPipe from the above post:

• I'm writing it once, then I am able to use it in any template by just importing it (either globally or locally)
• The pipe would be recomputed only when NECESSARY, meaning when its input change, and when the language changes (assuming a manual way to refresh them is added)

Using a signal:

• Makes it inconvenient to use in templates, especially with for ... of loops that reaaaally like recomputing themselves way too often when they are given a function result to iterate over
• Means that if I want to use this behaviour in multiple components, I need to either redeclare a signal to serve as input to the computed one, or make some sort of factory to create them on demand

While yes a computed signal instead of pipe could work, it would be far less usable than a pipe.

And using a signal within the pipe won't work either, as evidenced by #56401

[mgirolet-gl]

Your pipe is impure, therefore you must set pure: false.

Yes, but this makes the pipe go from not refreshing when I need to refreshing everytime something happens no matter how unimportant. Wouldn't it be possible to have a middle ground between pure and impure? Some kind of manual mode?

You could optimize performance or return a signal from transform() and declare your pipe as pure - the signal you returned will remain the same, just its value will change over time.

Which, if I'm using the pipe's result in a template, would require me to call the received signal as a function in the template to get its value, which makes us fall back on:

• Makes it inconvenient to use in templates, especially with for ... of loops that reaaaally like recomputing themselves way too often when they are given a function result to iterate over

[e-oz]

Use @let to cache it for @for.

[wartab]

Now, I don't know exactly what you do in your TranslationService, but I assume it's something like this.

https://stackblitz.com/edit/jo1msnae?file=src%2Fmain.ts

@Injectable({providedIn: "root"})
class TranslateService {
  private translations: {fr: Record<string, string>, de: Record<string, string>} = {
    "fr": {
      "hello": "Bonjour",
      "bye": "Au revoir",
      "thanks": "Merci",
    },
    "de": {
      "hello": "Hallo",
      "bye": "Tschüss",
      "thanks": "Danke",
    },
  }

  public readonly currentLanguage = signal<"fr" | "de">("fr");

  public readonly currentTranslationSet = computed(() => {
    return this.translations[this.currentLanguage()];
  });

  public getSortedTranslations(requiredTexts: Signal<string[]>): Signal<{ translation: string, key: string }[]> {
    return computed(() => {
      const texts = requiredTexts();
      const currentTranslationSet = this.currentTranslationSet();

      console.log("Recomputing");

      return texts.map(translationKey => {
        return {translation: currentTranslationSet[translationKey], key: translationKey};
      }).sort((a, b) => {
        return a.translation.localeCompare(b.translation);
      });
    });
  }
}


@Component({
  template: `
    <ul>
    @for (translationObject of sortedTranslations(); track translationObject.key) {
      <li>{{translationObject.key}}: {{translationObject.translation}}</li>
    }
    </ul>

    <button (click)="translateService.currentLanguage.set('fr')">FR</button>
    <button (click)="translateService.currentLanguage.set('de')">DE</button>

    <br>

    <button (click)="myTexts.set(['hello', 'bye'])">hello, bye</button>
    <button (click)="myTexts.set(['hello', 'thanks', 'bye'])">hello, thanks, bye</button>
  `,
  selector: "app-root",
  imports: [],
})
export class AppComponent {
  protected translateService = inject(TranslateService);
  protected myTexts = signal(["hello", "bye"]);
  protected sortedTranslations = this.translateService.getSortedTranslations(this.myTexts);
}

No pipe required and it's really not that complicated to setup, doesn't require massive cleanups and only runs the recomputation when stuff actually changes. Is there something you require that can't be done this way?

[mgirolet-gl]

Use @let to cache it for @for.

Wouldn't caching the signal cause unnecessary and/or missing refreshes, though?

---

Now, I don't know exactly what you do in your TranslationService, but I assume it's something like this.

As I have stated in my post, the translation example is an example (I put it in bold in my post, I suppose I should have underlined it too...).

As I said:

I'm using translations as an example here, but this could be applied to any callback-based data received from an external service of any kind.

You may use a translation service from an external package you're obviously not going to modify, or it could be a callback from an API that's done every few minutes, or essentially anything that could give you data once a promise resolves.

While your code snippet for sure solves the specific example I used, that's unfortunately all it does. I'm looking for a solution that works no matter the situation, no matter the context, and that's easy and convenient to use. Hence the issue. If I needed a solution on that specific example, I would have headed towards StackOverflow.

[wartab]

Rather than being passive-aggressive about anything that people suggest, I'd recommend an approach that actually makes people want to help you.

What concrete issue are you encountering with the signal approach? What you describe sounds like you want to react to some state change, which is exactly what signals are designed for. If your pipe is able to somehow gather that the state changed, so could some other part of your application, even if you can't change the external package.

[e-oz]

Wouldn't caching the signal cause unnecessary and/or missing refreshes, though?

No. The template, as a signal's consumer, will schedule an update of the @let binding every time the signal has a new value.

Creating a new kind of pipe, which is "pure but not quite", sounds very hacky and fragile to me. The maintenance costs of such a solution will be high.

[mgirolet-gl]

Rather than being passive-aggressive about anything that people suggest, I'd recommend an approach that actually makes people want to help you.

My apologies, that was not my intention.

What concrete issue are you encountering with the signal approach? What you describe sounds like you want to react to some state change, which is exactly what signals are designed for. If your pipe is able to somehow gather that the state changed, so could some other part of your application, even if you can't change the external package.

Please check my two previous comments (#60726 (comment) and #60726 (comment)), it's a matter of performance, and convenience to use across multiple components.

[mgirolet-gl]

No. The template, as a signal's consumer, will schedule an update of the @let binding every time the signal has a new value.

I will try to set this up and see how it performs and if I can have it work on multiple components without too much duplication but good enough performance.

Thanks! I'll post an update if I reach a good compromise.

---

Creating a new kind of pipe, which is "pure but not quite", sounds very hacky and fragile to me. The maintenance costs of such a solution will be high.

Fair enough, hence my initial suggestion:

Either add a function / event emitter to pipes to refresh it, or add a public function to its ChangeDetectorRef to force it to be marked as changed, even if it doesn't detect changes by itself.

The former is I suppose just a matter of exposing whichever function is responsible for refreshing the pipe, and the latter wouldn't be hackier than the very common components you see in many packages and projects that call change detection manually all the time.

[alxhub]

It's also possible to use signals inside of a pipe:

@Pipe({name: 'greeting', pure: false})
class GreetingPipe {
  readonly name = signal<string>('');
  readonly greeting = computed(() => 'Hello, ' + this.name());
  
  transform(value: string): string {
    // `untracked` necessary to set signals in a template context 🫤
    untracked(() => this.name.set(value));

    return this.greeting();
  }
}

[JeanMeche]

There is no new usecase brought here, so we'll fold the discussion into #56401.