Internationalization-of-dynamic-data-in-angular

Question

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>

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.

Better is if you Update your question instead of commenting here — Pardeep Jain, May 04 '18 at 10:22
Are you sure the error.status is string? Else in ts file change that to: this.status = error.status + ""; — Shantanu, May 04 '18 at 11:00

score 0 · Answer 1 · answered May 04 '18 at 10:57

Try translating that dynamic text in ts file this way:

First set TranslateService:

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

constructor( private translateService: TranslateService ) { }

and then, in a place where you'll recive the text (which in this case, I assume, is stored in error.status) do this:

this.status = this.translateService.instant(error.status)

and don't use | translate in html then, just put status there.

Internationalization-of-dynamic-data-in-angular

1 Answers1