Angular Internationalization Interpolated Strings

user_9582243 0
Viewed 164

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>
angular-localize angular-i18n angular
1 Answers

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 :)

user_103156650
Related