How to create new ngx-translate pipe (pure vs impure)

Question

Edit: I want to basically extend the pipe provided by ngx-translate, as below:

import { Pipe, PipeTransform } from '@angular/core';
import { TranslatePipe } from "@ngx-translate/core";

@Pipe({
  name: 'msg'
})

export class MsgPipe extends TranslatePipe implements PipeTransform {
  transform(value: any, args: any[]): any {
    return super.transform(value, args)
  }
}

This works only when pure is set to false, so I think the loader for ngx-translate is not ready yet. Is there anyway of checking? This way I could keep the pipe pure and working.

Original post (not relevant):

I have created a pipe that simply calls translateService.instant and returns the result.

@Pipe({
  name: 'msg',
  pure: false
})
export class MsgPipe implements PipeTransform {

  constructor(private translateService: TranslateService) {}

  transform(value: any, args: any[]): any {
    console.log('checked. val = ', value)
    return this.translateService.instant(value, args);
  }
}

Without marking this as pure: false, the pipe just returns the value. With it it does (as I presume the file loader is finished).

My issue is that each pipe is called about 8 times, can I do anything with change detection to tell the pipe to stop checking once a value is retrieved?

Just a quick question : Why would you need a pipe to manage translations ? It doesn't seem practical as all, even more as an impure pipe. I believe they use a pure pipe to manage the updates ? You could try changing the Detection Strategy in the components that use the pipe, but it will be very impractical to maintain... — Alex Beugnet
ngx-translate provides the pipe, i want to basically extend it, as detailed in my edit — Ben Taliadoros
updated question here: stackoverflow.com/questions/46431752/… — Ben Taliadoros

Sargo Darya Sargo Darya · Accepted Answer · 2017-09-26T14:53:20

The problem of being triggered multiple times is the reason why you want a pure pipe, as this only gets triggered again when the input reference changes (1). The problem with translate service instant though is, that at the time you try to load something, the translation might not be there yet so a pure pipe will not help you.

For ngx-translate, there is a pipe already which you can use, namely the translate pipe (2).

As far as I know, you can't do anything with the pipe to make it stop reevaluating itself. For this you might want to set your component to OnPush so it only updates itself when one of it's inputs change.

(1) https://angular.io/guide/pipes#pure-and-impure-pipes

(2) https://github.com/ngx-translate/core/blob/master/src/translate.pipe.ts

How to create new ngx-translate pipe (pure vs impure)

1 Answers