I have pure pipe TranslatePipe
that translates phrases using LocaleService
that has locale$: Observable<string>
current locale. I also have ChangeDetectionStrategy.OnPush
enabled for all my components including AppComponent
. Now, how can I reload whole application when someone changes language? (emits new value in locale$
observable).
Currently, I'm using location.reload()
after user switches between languages. And that's annoying, because whole page is reloaded. How can I do this angular-way with pure pipe and OnPush detection strategy?
Pure pipes are only triggered when the input value changes.
You could add an artificial additional parameter value that you modify
@Pipe({name: 'translate'})
export class TranslatePipe {
transform(value:any, trigger:number) {
...
}
}
and then use it like
<div>{{label | translate:dummyCounter}}</div>
Whenever dummyCounter
is updated, the pipe is executed.
You can also pass the locale as additional parameter instead of the counter.
I don't think using |async
for a single pipe parameter will work, therefore this might a bit cumbersome (would need to be assigned to a field to be usable as pipe parameter)