ngx-translate default text if key is missing or translation file is being loaded

Question

I'm setting up a new Angular 7 app. I want to set a default text for translation. So in the translation {{ 'wait' | translate }}, I want to set text 'Waiting Now' as default text if there are any fallback. Means if data is being loaded or key is missing then passed value (in this case Waiting Now) should appear.

I was trying to do something like {{ 'Intro' | translate:'localizedText' }}

Not didn't worked

{{ 'Intro' | translate:'localizedText' }}

I expect result should come as

{{ 'Intro' | translate:'localizedText' }} => Intro (If being loaded or missing key)

{{ 'Intro' | translate:'localizedText' }} => translated text

Pluviometer

Answer 1

I followed the instructions to create a missing translations handler here: https://github.com/ngx-translate/core#how-to-handle-missing-translations

But my version allows passing a default value to the pipe like this

<span>{{"MyTranslateKey" | translate: {Default: "Default Translation"} }}</span>

The default can be a specific string as above, or a variable.

Here is my handler:

import {MissingTranslationHandler, MissingTranslationHandlerParams} from '@ngx-translate/core';

export class MissingTranslationHelper implements MissingTranslationHandler {
  handle(params: MissingTranslationHandlerParams) {
    if (params.interpolateParams) {
      return params.interpolateParams["Default"] || params.key;
    }
    return params.key;
  }
}

Mice

Getting the typeScript error: Property 'Default' does not exist on type 'Object'. Any ideas? – Quotable

Answer 2

you will need to use a custom MissingTranslationHandler Like so:

in your app.module or wherever you are loading TranslateModule.forRoot do this:

@Injectable()
export class MyMissingTranslationHandler implements MissingTranslationHandler {
    handle(params: MissingTranslationHandlerParams): string {
        return `**MISSING KEY: ${params.key}**`;
    }
}

And in your providers:[] add this: (After you import MissingTranslationHandler)

{
    provide: MissingTranslationHandler,
    useClass: MyMissingTranslationHandler
},

See this link for more details:

https://github.com/ngx-translate/core#how-to-handle-missing-translations

To return a default values for the missing you can try this:

1- Create an object/json to contain the default values, that json should contain the same structure as the original json.

const alternativeJson = {  
       value1: 'default1'
}

handle(params: MissingTranslationHandlerParams): string {
        return this.alternativeJson[params.key];
}

Unsteady

I am using the same as you have mentioned here. Problem is that it will return the same key what you have passed. But I want to return a default value for every individual key something like below:- {{ 'key1' | translate: 'Text 1' }} It should return Text 1 if key1 text is missing. {{ 'key2' | translate: 'Text 2' }} It should return Text 2 if key2 text is missing. I am looking to achieve this one. If possible share some example. – Pluviometer

yeah, you can achieve that since you have access to params.key, what you need is another object/json that contains alternatives/default values, which will have the same structure as your original json, but just with different values. – Unsteady

Means, I can't do it from the component itself. What, If I want to declare something like <span translate="TRANSLATION_KEY" translate-default="Default text"></span>. Same what we were doing in AngularJS – Pluviometer

I am not able to find out any documentation for the same on ngx-translate – Pluviometer

have you got any idea on it? – Pluviometer