Angular Internationalization Interpolated Strings

I am not sure how to do a translation for a dynamic variable in my app.

Currently, I have the report descriptions in a static json file. I am looping through the content of that and using string interpolation in the HTML file. Is there a way to translate the interpolated string in @angular/localize without using a select ICU expression?

<ng-container style="display: none;" *ngFor="let report of reports">
<tr>
 <td width="80%" class="colThree" i18n="reportDesc">
   {{report.ReportDescription}} //need translate
  </td>
  </tr>
</ng-container>

I personally found using a pipe is handy, especially if you also need to translate the value in component code:

type ReportDescription = "Variant one" | "Variant two";

@Pipe({
    name: "translateDescriptionPipe",
})
export class TranslateDescriptionPipe implements PipeTransform {
    transform(value: ReportDescription): string {
        switch (value) {
            case "Variant one":
                return $localize`...one...`;
            case "Variant two":
                return $localize`...two...`;
        }
    }
}

You can then do:

in component templates:

<td>{{ report.ReportDescription | translateDescriptionPipe }}</td>

in component code:

const translationPipe = new TranslateDescriptionPipe(); // or via constructor injection
translationPipe.transform(report.ReportDescription);

_{You may want to read how to mark text for internationalization in component code}

If you only ever need to translate inside the template, you can create a component:

@Component({
    selector: 'app-translated-description',
    template: `
    <ng-container [ngSwitch]="description">
      <ng-container *ngSwitchCase="'Variant one'" i18n>...one...</ng-container>
      <ng-container *ngSwitchCase="'Variant two'" i18n>...two...</ng-container>
    </ng-container>
  `,
})
export class TranslatedDescriptionComponent {
    @Input() description: ReportDescription;
}

You can then do:

<app-translated-description [description]="report.ReportDescription"></app-translated-description>

Of course you can also integrate the switch directly into your existing component, if that suites your needs.

_{You may want to read how to mark text for internationalization in component template}

code not tested :)