Angular ngFor on an array loaded via Transloco

Question

I'm using Transloco to manage multiple language in an angular10 project. I created a json i18n file like this:

    "Datalist":[
    {
        "from" : "value",
        "Content" : "data"
    },
    {
        "from" : "value",
        "Content" : "data"
    }...]

In my template I'm trying something like this to load the values from my file:

<div class="container" *transloco="let datalist; read: 'Datalist'">
<a>tst1</a>
<div class="tile is-3"  *ngFor="let data of datalist">
    <a>tst2</a>
    <div class="content">{{data.Content}}</div>
    <p class="subtitle">{{data.from}}</p>
</div>

I want to create a tile for each element of datalist, angular doesn't throw an exception. However, it doesn't load anything (tst2 does not show). I will have multiple translation of that data and I want for the future the ability to add and remove data easily without touching the template.

It's my first angular project I may have missed something obvious. Any ideas?

score 0 · Answer 1 · answered Nov 05 '20 at 21:18

You should be able to use a transloco pipe for your translation.

<div class="tile is-3"  *ngFor="let data of datalist">
  <a>tst2</a>
  <div class="content">{{data.Content | transloco}}</div>
  <p class="subtitle">{{data.from | transloco}}</p>
</div>

The data.content should contains a same key as is in your i8n .json.

Example:

en.json

{
    "GLOBAL": {
        "RESET": "Reset",
        "FILTER": "Filter",
    }
}

HTML:

<button mat-raised-button color="primary" (click)="reset()">{{ 'GLOBAL.RESET' | transloco }}</button

score 0 · Accepted Answer · answered Nov 07 '20 at 21:55

Thanks a lot for the answer I tried what you said but the datalist doesn't exist for the ngFor if I don't load it via transloco beforehand.

I started over my component and I cleaned up my import. I managed to make it work (even if I don't really know why) by adding:

datalist: any;

in my component.ts, I should better type it later.

My best bet on what is happening is that when i call *transloco="let datalist; read: 'Datalist'"> in my template it initialize the datalist in my component.ts, so that when I call the ngFor it finds the datalist with values in the component.ts. Anyway thanks a lot !

Angular ngFor on an array loaded via Transloco

2 Answers2