Using a pipe under a different name

Question

I'm using the ngx-translate internationalization library in my Angular 6 app. Right now a translation in one of my templates is done like this:

<span>{{ 'HELLO' | translate:param }}</span>

However, it would be great if I could have it this way:

<span>{{ 'HELLO' | i18n:param }}</span>

All I have to do is somehow give the pipe a name alias, but I have no idea how to accomplish that. I started to write something like...

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

@Pipe({ name: 'i18n' })
export class I18nPipe implements PipeTransform {

  constructor(private i18n: TranslateService) { }

  transform(key: string, ...args: any[]): any {
    this.i18n.get(key).subscribe((res: string) => {
        return res || key;
    });
  }

  // How to return if async? How to process args?

}

But should I even code it this way, or is there maybe a simple general way in Angular to alias pipes?

Another way I tried:

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

@Pipe({ name: 'i18n' })
export class I18nPipe extends TranslatePipe implements PipeTransform {

  transform(key: string, args?: any): any {
    return super.transform(key, args);
  }

}

This gives me an error:

ERROR TypeError: Cannot read property 'get' of undefined
    at I18nPipe.updateValue (ngx-translate-core.js:1058)
    at I18nPipe.transform (ngx-translate-core.js:1097)
    at I18nPipe.transform (i18n.pipe.ts:8)

Just to spare a couple of characters in my templates, and just because I like `i18n` better than `translate`. — tom, Sep 23 '18 at 21:56

score 2 · Answer 1 · answered Sep 23 '18 at 22:07

2

You can just wrap the original pipe

@Pipe({name: 'i18n'})
export class I18nPipe implements PipeTransform {
  constructor(private translatePipe: TranslatePipe) {
  }

  transform(query: string, ...args: any[]) {
    return this.translatePipe.transform(query, args);
  }
}

answered Sep 23 '18 at 22:07

Diadistis

12,086
1
33
55

Maybe something's wrong with my imports, because your solution also gives me an error, namely: _StaticInjectorError(AppModule)[I18nPipe -> TranslatePipe]: StaticInjectorError(Platform: core)[I18nPipe -> TranslatePipe]: NullInjectorError: No provider for TranslatePipe!_ – tom Sep 23 '18 at 23:15

score 1 · Accepted Answer · answered Sep 23 '18 at 22:16

1

You can extend the original pipe, without adding any implementation code:

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

@Pipe({ name: 'i18n' })
export class I18nPipe extends TranslatePipe { }

See this stackblitz for a demo.

answered Sep 23 '18 at 22:16

ConnorsFan

70,558
13
122
146

This was the first thing I tried, but for this I get the following error: _Cannot read property 'get' of undefined at I18nPipe.updateValue (ngx-translate-core.js:1058) ..._. I can't see the difference between my code and the one you provided on stackblitz. All our imports are the same. It's strange because it works if I use `translate` in my templates, but not with `i18n`. Any suggestion at which part of my app I should look for problems with these symptoms? – tom Sep 23 '18 at 22:51
1

You may find a difference between your module file and the `app.module.ts` in the stackblitz. – ConnorsFan Sep 23 '18 at 23:27

Using a pipe under a different name

2 Answers2