@tuiPure stringify & i18n translation

[mazero]

Hello,

I have a "tui-select" and I use @tuiPure stringify to have a difference between the "valueContent" & the "value".
I try with ngx translate to change the valueContent list so that it is translated when the user changes the language of my application.
(Switzerland in English version / Suisse in French version, etc...).

Concert example:

HTML

<tui-select  class="country-dropdown"
  [formControl]="formControl"
  [valueContent]="stringify(countries)">
  <span translate>Country</span>
  <span *ngIf="required" class="tui-required"></span>
  <cdk-virtual-scroll-viewport
    *tuiDataList
    tuiScrollable
    class="scroll"
    [itemSize]="44"
  >
    <tui-data-list>
      <button
        *cdkVirtualFor="let country of countries"
        tuiOption
        [value]="country.iso.alpha2"
      >
        <img
          [alt]="country.iso.alpha2"
          [src]="country.iso.alpha2 | tuiFlag"
        />{{ country.name | translate }}
      </button>
    </tui-data-list>
  </cdk-virtual-scroll-viewport>
</tui-select>

CONTROLLER, I would like the "name" translated

 @tuiPure
  public stringify(
    countries: readonly Country[]
  ): TuiStringHandler<TuiContextWithImplicit<string>> {
    const map: Map<string, string> = new Map(
      countries.map(({ iso, name }) => [iso.alpha2, name] as [string, string])
    );
    return ({ $implicit }: TuiContextWithImplicit<string>) =>
      map.get($implicit) || '';
  }

const COUNTRIES

import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';

  [{
    name: _('Switzerland'),
    region: 'Europe',
    timezones: {
      'Europe/Zurich': '+02:00',
    },
    iso: {
      alpha2: 'CH',
      alpha3: 'CHE',
      numeric: '756',
    },
    phone: ['+41'],
    emoji: '\ud83c\udde8\ud83c\udded',
    image:
      'https://cdn.jsdelivr.net/npm/[email protected]/dist/images/CH.svg',
  }, {....}]

The list of values does change in the select, but the value displayed by the "valueContent" always remains in English.
...I try with the pipe translate or translateService.instant() but nothing - it's not reloaded.
Do you have a solution with ngxtranslate's translateService and this taiga component ?
Thanks.

[waterplea]

@tuiPure memoizes result if input hasn't changed. Looks like your countries array remains the same. You need to pass your translations into your stringify method as a second argument so that when new translations arrive — it would recalculate the result.

Another option is to not mutate countries, this way it would become a new ref to the new array and stringify method will be retriggered.