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
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;
}
}
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];
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With