Angular6 Getting error while trying to using DecimalPipe to a custom pipe

Question

I am trying to inject DecimalPipe to my custom pipe as described in this answer.

here is the code:

@Pipe({name: 'irc'})
export class IRCurrencyPipe implements PipeTransform {

  constructor(private decimalPipe: DecimalPipe) {}

  transform(value: string | number, type: string = 'rial') {
    value = Number(value);
   if (isNaN(value)) { throw new Error(`${value} is not a acceptable number`); }
    return this.decimalPipe.transform(value, '1.0-0') + ' ریال';
  }
}

But I get TypeError: Cannot read property 'transform' of undefined error when running tests from this code.

I also tried extending the DecimalPipe as suggested in this answer :

@Pipe({name: 'irc'})
export class IRCurrencyPipe extends DecimalPipe implements PipeTransform {


  transform(value: string | number, type: string = 'rial') {
    value = Number(value);
    if (isNaN(value)) { throw new Error(`${value} is not a acceptable number`); }
    return super.transform(value, '1.0-0') + ' ریال';
  }
}

But I get: Error: InvalidPipeArgument: 'Cannot read property 'toLowerCase' of undefined' for pipe 'DecimalPipe' in this case. Is there a working solution to using one of the built-in pipes in angular to a custom pipe?

Did you ever find an answer to this? I'm running into the same issue. — Uniphonic, Mar 05 '19 at 17:47
I did something else. You can see code [here](https://github.com/alihoseiny/ngx-persian/blob/master/projects/ngx-persian/src/lib/Pipes/IRCurrency.pipe.ts). — Mr Alihoseiny, Mar 21 '19 at 09:52

score 2 · Answer 1 · answered Nov 21 '18 at 17:54

This happens when you don't have LOCALE_ID set. You can set it like this:

import { LOCALE_ID, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from '../src/app/app.component';

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ AppComponent ],
  providers: [ { provide: LOCALE_ID, useValue: 'fr' } ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

See full docs here

Thanks, but I've added that to providers before and it did not help me. — Mr Alihoseiny, Nov 23 '18 at 09:33

score 1 · Answer 2 · answered Oct 18 '18 at 17:42

1

I tried and I am getting the result. See the code

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

@Pipe({name: 'currency'})
export class CurrencyPipe extends DecimalPipe implements PipeTransform {
    transform(value: string | number, type: string = 'rial') {
        value = Number(value);
        if (isNaN(value)) { throw new Error(`${value} is not a acceptable number`); }
        return super.transform(value, '1.0-0') + ' ریال';
    }
}

answered Oct 18 '18 at 17:42

Sachin Jagtap

423
3
11

Thanks but it is the code that I tried. The problem is it only works when I make an instance of it with `en-US` input to the constructor. But I wanted to use `fa` value for it if I had to do it. – Mr Alihoseiny Oct 18 '18 at 17:54
Can you create a Stackblitz of it and share it. – Sachin Jagtap Oct 19 '18 at 04:56

score 0 · Answer 3 · answered Jan 07 '20 at 08:39

In your unit test you'd need to register any non-default locale (additionally to providing LOCALE_ID):

import localeFr from '@angular/common/locales/fr';

beforeEach(() => {
  registerLocaleData(localeFr);
});

See https://angular.io/guide/i18n#i18n-pipes

Angular6 Getting error while trying to using DecimalPipe to a custom pipe

3 Answers3