1

I'm new to Angular, I'm using ngx-translate all over my app and it is working fine however, I'm not able to figure out how to translate dynamic data even after searching all over the internet I couldn't quite understand how to achieve this, below is what I've tried, your assistance is much appreciated.

en.json

"STATUS_ACTIVE": "Active"

employees.component.html

<tbody>
    <ng-container *ngFor="let item of employees">
    <tr *ngFor="let employeeStatus of item.employeeJobStatuses">
      <td>{{ item.firstName_FL }}</td>
      <td>{{ item.position.name_FL }}</td>
      <td>{{ item.hiringDate | date }}</td>
      <td>{{ item.firstContractingSalary }}</td>
      <td>{{ (employeeStatus.status) | translate }}</td>
      <td>
        <div class="btn-group">
          <p><i type="button" (click)="editEmployee(item.id)" class="fa fa-pencil-square-o"></i></p>
          <p class="action-center" translate>employees.terminate</p>
          <p translate>employees.suspend</p>
        </div>

      </td>
    </tr>
  </ng-container>
</tbody>

Please help me out translate employeeStatus.status

Omar
  • 212
  • 6
  • 17
  • What does `employeeStatus.status` contain? – Silvermind Dec 17 '19 at 08:46
  • It contains a string "STATUS_ACTIVE" – Omar Dec 17 '19 at 08:49
  • Shouldn't your translation file `en.json` have a key `{ "STATUS_ACTIVE": "Active" }`? – Silvermind Dec 17 '19 at 09:18
  • yes, I actually put it like this but it's not translating – Omar Dec 17 '19 at 09:21
  • What will be the value of `employeeStatus.status`? Is it `STATUS_ACTIVE` or just `Active`? – hrdkisback Dec 17 '19 at 10:38
  • I want the translation to display "Active" however the response that I receive displays STATUS_ACTIVE – Omar Dec 17 '19 at 10:47
  • Have you added `HttpLoaderFactory` and `TranslateHttpLoader` in `app.module.ts` ? Can you post that code? – hrdkisback Dec 17 '19 at 10:51
  • export function HttpLoaderFactory(http: HttpClient) { return new TranslateHttpLoader(http, "./assets/i18n/", ".json"); } Actually the translation is working fine, it's just with dynamic data – Omar Dec 17 '19 at 10:59
  • 1
    Try to use `this.translate.instant()` method refer this https://stackoverflow.com/questions/43004797/not-able-to-get-dynamic-translation-of-text-using-ngx-translate-core-angular-2 – hrdkisback Dec 17 '19 at 11:16
  • I've tried this example but still no joy, do you have any other recommendations ? – Omar Dec 17 '19 at 11:21
  • 3
    I have created a working [Stackblitz](https://stackblitz.com/edit/ngx-translate-example-czucpk?file=src%2Fapp%2Fapp.component.ts) for you. It just works. – Silvermind Dec 17 '19 at 12:40
  • @Silvermind You really saved the day, It is working perfectly now, thank you so much ! – Omar Dec 17 '19 at 13:08
  • 1
    @Silvermind But the question is about dynamic data. If user open application then he change data on server are user will have instant update on his application ? – Mises Dec 17 '19 at 13:08
  • @Silvermind Yes, this is well handled, thank you though – Omar Dec 17 '19 at 13:09
  • @Silvermind Or sorry i was wrong maybe it should be questioned like "real time data" instead of "dynamic data". XD In case real time data he should create custom made loader and set there observable who will update translation with no any action. – Mises Dec 17 '19 at 13:15
  • @Omar what was the actual issue in your code? – hrdkisback Dec 17 '19 at 13:17
  • The problem was very silly to be honest, I was putting the translated string in an object, so I just removed it from the object – Omar Dec 17 '19 at 13:32
  • @Mises If either the language or the property value changes, the display will be updated. – Silvermind Dec 18 '19 at 08:11
  • @Silvermind Yeah but you got on mind event emited by user. I am thinking about real time data game where all data goes through @ngx-translate/core. User will not see any changes until he make some move or you implement on custom made loader a listener. – Mises Dec 18 '19 at 08:19
  • 1
    @Mises Perhaps a good question to post on so? – Silvermind Dec 18 '19 at 10:18

0 Answers0