angular localize of an array of objects

Question

I have an array of object inside my angular component like the following:

export class Result implements OnInit {
    sortBy = [
        { id: 'total', name: 'Sort by Price' },
        { id: 'time', name: 'Fast tour' },
        { id: 'delDate', name: 'Sort by delivery date' },
        { id: 'readyDate', name: 'Sort by tour ready date' }
      ];

....rest of code
}

and in my template I'm using it in my custom select component like the following:

<app-material-select
                formControlName="sortBy"
                defaultValue="total"
                labelName="Sort by"
                [options]="sortBy" >
              </app-material-select>

And I have tried to make a work arround to make the translation using angular-localize but didn't found actually, so any ideas how?

Answer 1

I had the exact same problem tonight and I found a fix. Since I'm quite new to the Angular family, please consider that my approach could be naive.

I suppose that you want to translate the items in the sortBy array. You can tell Angular to extract each of those with $localize. Because $localize seems to return a string type, you can't use it directly on sortBy. So, in your case, you would get something like this (assuming you don't want to translate the id):

export class Result implements OnInit {
    sortBy = [
        { id: 'total', name: $localize`Sort by Price` },
        { id: 'time', name: $localize`Fast tour` },
        { id: 'delDate', name: $localize`Sort by delivery date` },
        { id: 'readyDate', name: $localize`Sort by tour ready date` }
      ];

....rest of code
}

Angular is going to give you a proper trans-unit for each item in your .xlf file after the extraction.