Angular Boolean Pipe Yes/No localized

Question

i need a handy way to get my yes-no pipe localized like the date pipe {{ my.date | date: 'short' : 'UTC' : 'de-DE' }}

something like

    {{ my.boolean | yesNo : "de-DE" }}

and instead of returning value ? "Yes" : "No"; I need some magic :D

    @Pipe({
      name: 'yesNo'
    })
    export class YesNoPipe implements PipeTransform {
    
      transform(value: boolean, ...args: unknown[]): string {
        // need some magic
        return value ? localizedYes : localizedNo;
      }
    
    }

Answer 1

I'd recommend using the 'select' feature in Angular's built in internationalization for translating Booleans:

Step 1 - set up internationalization in your app following the steps outlined in the Angular documentation. There's a good instructional video here: https://angular.io/guide/i18n-overview

Step 2 - Prepare your component for translation.

Just say you have a component that looks like this:

<span>{{myBooleanValue}}</span>

You can prepare it for translation by adding the i18n tag and the select feature:

<span i18n>{ myBooleanValue, select, true {true} false {false}}</span>

Step 3 - extract your source text for translation by running ng extract-i18n --output-path src/locale

Step 4 - If you followed the video in Step 1, you should have an messages.xlf file with your source text, and a copy of it with your target language text. Copy the transunit from your source xlf to your target xlf and add the following target line below the source text in your trans unit:

<source>{VAR_SELECT, select, true {true} false {false}}</source>
<target>{VAR_SELECT, select, true {verdadero} false {falso}}</target>

These show spanish translation for true/false. You could add yes/no instead in your target language.