Interpolate strings without a translated value

[biesbjerg]

I'm submitting a ... (check one with "x")

[ ] bug report => check the FAQ and search github for a similar issue or PR before submitting
[ ] support request => check the FAQ and search github for a similar issue before submitting
[x] feature request

Current behavior
I'm trying to mimic Gettext behavior:

• Base language in source is plain english
• If a translation exists, use it, if not, don't do anything (in my case, leave the english strings)

This is the default behavior in ng2-translate, so far so good.

Where I'm running into trouble is when I have a string without a translation, that needs interpolation. The string isn't interpolated which makes sense if you use made-up keys like LOGGED_IN_USER etc, since you wouldn't need that to be interpolated, but in my case I do.

Do you think that is something this lib could support?

EDIT: Example

<h1>{{ 'This is a string with value "{value}" interpolated' | translate: { value: 'TEST' } }}</h1>

If no translation is available for this message, it will output:

This is a string with value "{value}" interpolated

Instead of what I want:

This is a string with value "TEST" interpolated

(I'm using the new custom TranslateParser to allow me to interpolate {value} in my strings)

[biesbjerg]

I thought about using the MissingTranslationHandler and interpolate the params there, but the TranslateParser is not exposed in MissingTranslationHandler since it's private so there's no way to access the interpolation method.

If parser were changed from private to public something like this would be possible:

export class InterpolatedMissingTranslationHandler implements MissingTranslationHandler {
	public handle(params: MissingTranslationHandlerParams) {
		return params.translateService.parser.interpolate(params.key, params.interpolateParams);
	}
}

[ocombe]

It makes sense, I'll add it to the todo list (or you can do a PR!)

[biesbjerg]

Which do you prefer?

1. Support interpolation in MissingTranslationHandler only
1.1. Make TranslationService's parser property public, and thus accessible through params.translationService.parser <-- (I think this makes most sense, since loader is already public)
1.2. Make TranslationParser accessible via params.translationParser (just like params.translationService)

2. Support interpolation for keys always
2.1 Always interpolate missing translation keys

[biesbjerg]

Pull request opened: https://github.com/ocombe/ng2-translate/pull/348/files

[SamanthaAdrichem]

Adding comment to make the search easier for people in finding a working result:

Though i would expect this to be default behaviour, this works for us:

import {LocalizationMissingTranslationsService} from "./localization/missing-translations.service";
import {MissingTranslationHandler, TranslateModule, TranslateService} from "@ngx-translate/core";
...

@NgModule({
	exports: [TranslateModule],
	imports: [
		...
		TranslateModule.forRoot({
			missingTranslationHandler: {provide: MissingTranslationHandler, useClass: LocalizationMissingTranslationsService}
		}),
		...
	],
	providers: [...]
})
export class AppModule {
...
}

using litterally the code from @biesbjerg in a seperate file

export class InterpolatedMissingTranslationHandler implements MissingTranslationHandler {
	public handle(params: MissingTranslationHandlerParams) {
		return params.translateService.parser.interpolate(params.key, params.interpolateParams);
	}
}

[maks-humeniuk]

@SamanthaAdrichem, using return params.translateService.parser.interpolate(params.key, params.interpolateParams); for { "GREETING": "Hello, {{name}}!" } gives "GREETING", not "Hello, user!". Are you sure that this solution still works?

[SamanthaAdrichem]

@Halfist it was on v9. I will check it for you tomorrow between 9 and 11 CEST and let you know

[SamanthaAdrichem]

@Halfist we're on version 11.0.1 and still somewhat literally use the code above (only a different file name for the handler)
However we do not translate using the "GREETING" syntax we translate like so

HTML

<element translate>Hello {{name}}</element>

HTML plurals

<ng-container [ngPlural]="count">
    <ng-template ngPluralCase="=0"><span translate>There are no things</span></ng-template>
    <ng-template ngPluralCase="=1"><span translate>There is 1 thing</span></ng-template>
    <ng-template ngPluralCase="other"><span translate>There are {{count}} things</span></ng-template>
</ng-container>

Typescript

import {TranslateService} from '@ngx-translate/core';

class x {
...
    constructor(
        ...,
        protected translateService: TranslateService,
        ...,
    ) {}
...
    x(): void {
        this.translatedValue = this.translateService.instant('Hello {{name}}', {name: 'name'});
    }
....
}

If you use the greetings syntax you probably need to fix some code in the InterpolatedMissingTranslationHandler