Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 634
Sushil Kumar Gupta Avatar asked Apr 13 '19 05:04

Sushil Kumar Gupta


2 Answers

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;
  }
}
like image 182
GeekyMonkey Avatar answered Sep 17 '22 13:09

GeekyMonkey


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];
}
like image 39
Nadhir Falta Avatar answered Sep 20 '22 13:09

Nadhir Falta