Internationalization-of-dynamic-content-in-angular

ShilpaKulkarni

Asked on April 25, 2018

Hello,

I am using internationalization [i18n] in my angular project. For static content it is working properly. But dynamic content it is not working.

My code is as follows:
Static:
<div>{{ 'ADD ENTRY' | translate }} </div>

Dynamic:

<div>{{ status | translate }} </div>

Can anyone provide solution in solving this issue.

Thanks & Regards
Shilpa Kulkarni

Krish

Replied on April 25, 2018

It has nothing to do with dynamic value. Translation will be done for those values which are configured for translation in i18n file. It may possible that the value in status variable will not be configured.

If 'ADD ENTRY' is working it means 'ADD ENTRY' has been configured.

You can do a test for dynamic value here. Assign a variable in component such as

entry_msg = 'ADD ENTRY';

and then use it in HTML template.

<div>{{ entry_msg | translate }} </div>

I hope it will work. Then to get work for your status variable, you need to configure possible values of status variable in i18n configuration file.

ShilpaKulkarni

Replied on May 03, 2018

Thank you for the reply.

I am getting status code from the back end API, that I am mapping to the variable status in the ts file.

In my case I am getting status code as 404. So I reconfigured that 404 in i18n configuration file.

But it is not working if I try to translate that variable.But instead of passing that status variable, if I directly pass '404' as string then the internationalization working properly.

My code is as follows:
<div class="error" *ngIf="status">**{{ '404' | translate }} **</div>
for this internationalization working.

But I need to internationalize the variable status, but facing issue. My code is as follows:
In HTML:
<div class="error" *ngIf="status">{{ status | translate }} </div>

In ts:
status: string;

this.status = error.status;

I also tried as:
<div class="error" *ngIf="status">{{"'"+{{status}}+"'"}} | translate}}</div>

But it is not working. Please provide solution in solving this issue.