[SOLVED] Angular ngFor on an array loaded via Transloco

Angular ngFor on an array loaded via Transloco

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?

Solution

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 !