Translation with param that need translation as well

[astik]

I'm submitting a...

[ ] bug report
[ ] feature request
[x] support request

Expected behavior

Possibility to define nested translation : a translation that contains param which need to be translated as well.

Actual behavior

Param can be defined in a message (thanks to #19), though it does seem to support pipe in them (or any way to process a sublevel translation.

Steps to reproduce the behavior

StackBlitz Template: https://stackblitz.com/edit/angular-l10n-249

Specifications: Angular version, library version, environment, browser

• angular 7.2.15
• angular-l10n 7.2.0
• environment / browser should not be relevant, but i'm testing with Chrome (74.0.3729.169).

[robisim74]

Hi @astik,

the pipe inside the parameters are not allowed. You need to translate the parameters (through other pipes or in the component) before passing them. Like this sample: https://github.com/robisim74/angular-l10n/wiki/Snippets

[astik]

Hum, that is a solution in some case, but it is not enough for my use case. The number of params i've got for one action are variable, only the action name can dispatch to the correct message which know how to handle those params (order, processing, ...). I'll try to preprocess all the params before, if no key is returned, then no sub-translation was needed and i return the original input. if a sub-translation is found, then i return the sub-translation. It is not perfect but it should be ok for my simple use case. Feel free to close this issue if you want. Or leave it open for a future feature proposal =P Anyway, thanks for your fast answer.

[robisim74]

Ok, remember that you can also translate whole arrays (the important thing is that the keys are all of type string), and you could pass as a parameter the whole array translated (as an object, or you can manipulate it).

[astik]

I have updated the stackblitz to have the workaround.

I have added a new pipe :

import { Pipe, PipeTransform } from '@angular/core';
import { TranslationService } from 'angular-l10n';

@Pipe({
	name: 'translateArray'
})
export class TranslateArrayPipe implements PipeTransform {
	constructor(protected translation: TranslationService) {}

	transform(value: any[], lang: string, args?: any): any {
		return value.map(v => {
			if (typeof v !== 'string') {
				return v;
			}
			const translation = this.translation.translate(v, args, lang);
			if (translation === DEFAULT_MISSING_VALUE) {
				return v;
			}
			return translation;
		});
	}
}

and use it like this in my template :

<span
	l10nTranslate
	[params]="audit.actionParams | translateArray: lang"
	[innerHTML]="'notifications.' + audit.action"
></span>

[robisim74]

@astik Thanks for sharing your solution

[robisim74]

Closed due to inactivity