Pipes don't update after language change

[MickL]

Is your feature request related to a problem? Please describe.

This may or may not be a feature request for updating the documentation:

When using .translate() within pure pipe's the pipe does not rerender when changing the language. This makes sense do to the design of pure pipes, but the docs may state an efficient way to deal with that.

Describe the solution you'd like

Update the docs to have a "Usage within pipes" topic. The only solution I can think of is also inputting the language which would trigger rerendering:

@Pipe({
  name: 'myAwesome'
})
export class MyAwesomePipe implements PipeTransform {
  constructor(private translocoService: TranslocoService) {
  }
  
  transform(state?: MyEnum, lang?: string): string {
    switch (state) {
      case MyEnum.A:
        return this.translocoService.translate('a');
      case FootballCup.Bundesliga2:
        return this.translocoService.translate('b');
      default:
        return '';
    }
  }
}

But then we also need the active language to be available within the template:

{{ myVar | myAwesome: activeLang }}

Which is kind of complicated because we need the translocoService be public avaiable within the template:

{{ myVar | myAwesome: (translocoService.langChanges$ | async) }}

[MickL]

I just figured out the possible approach I showed above does not work because langChanges$ triggers immediately and not after the language has been loaded so the pipe gets triggered but translations are still the same and nothing changes. If I see correctly there is no "langChanged$" event.

[mfodor]

Implement #461, please!

[pablomaurer]

@MickL With which solution did you proceed? As I'm struggling with the same issue.

[shaharkazaz]

@pablomaurer did you try to use langChanged$ in your pipe?

[pablomaurer]

Way 1: Add the lang change as an param to re-trigger the rendering? I thought there's maybe a way without doing that. Because this way I have to add the translocoService everywhere where I use my custom pipes (don't like that).

Way 2: Use the langChanged$ in the pipe. But then in returns an observable and you have to use: {{ myVar | myAwesome | async) }} which is still ugly in my opinion? Or did I miss something here?

[Predhin]

+1