I would like to translate my code with i18next for my angular project.

I've installed: i18next, i18next-xhr-backend, i18next-browser-languagedetector

Using lot of ngfor into my code --> I don't know how to use i18next into string interpolations.

In this example below, i would like to translate item.label.

  <ng-container *ngFor="let item of listOfItems; let i = index">

    <mat-grid-tile rowspan="1" class="{{ item.visible === 'false' ? 'invisible' : '' }}">
      <button *ngIf="item && !isItemSelected(item)" (click)="selectItem(item)" mat-raised-button
        class="action-button {{ item.color }}">
        <span class="action-button-text">{{ item.label }}</span>
      </button>
    </mat-grid-tile>
  </ng-container>```

Here is my list of label :

[{
        "id": "1",
        "label": "flower",
        "subject": "plant", 
        "visible": "true",
        "color": "yellow"
    },
    {
        "id": "2",
        "label": "bread",
        "subject": "table", 
        "visible": "false",
        "color": "white"
    },
     {
        "id": "3",
        "label": "glass",
        "subject": "table", 
        "visible": "true",
        "color": "green"
    },
 {
        "id": "4",
        "label": "pissenlit",
        "subject": "plant", 
        "visible": "true",
        "color": "yellow_green"
    }]

here is my list of translation english and french : en:

{"flower":"flower",
"bread":"bread",
"glass":"glass"
"pissenlit":"pissenlit"
}

FR

{"flower":"fleur",
"bread":"pain",
"glass":"verre"
"pissenlit":"pissenlit"
}```