Angular: iterate over an object in i18n json

Question

I've an object like this in a json file managed by i18n.

"ST01P01": {
        "warranties": {
            "ij1ToIj5": "Indemnités journalières",
            "overheadCosts": "Frais généraux",
            "invalidity": "Frais généraux",
            "death": "Décès",
            "seriousIllnesses": "Maladies graves",
            "educationAnnuity": "Rente éducation",
            "jointAnnuity": "Rente conjoint",
            "purchase": "purchase"
        }

I try to iterate over it like this without success in my template...The 'keyvalue pipe isn't recognized.

  <div *ngFor="let item of 'ST01P01.warranties' | translate | keyvalue">
      {{item.key}}:{{item.value}}
    </div>

Thanks for your help

Answer 1

Try like this in HTML:

<div *ngFor="let item of testData.ST01P01.warranties | keyvalue">
     Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b>
</div>

And TS file:

  testData = {
     'ST01P01': {
        "warranties": {
           "ij1ToIj5": "Indemnités journalières",
           "overheadCosts": "Frais généraux",
           "invalidity": "Frais généraux",
           "death": "Décès",
           "seriousIllnesses": "Maladies graves",
           "educationAnnuity": "Rente éducation",
           "jointAnnuity": "Rente conjoint",
           "purchase": "purchase"
        }
      }
  };