'Angular i18n placeholders and xlf message files

In reference to i18n placeholders and interpolation, I'm reading thru some online docs such as:

https://angular.io/api/localize/init/$localize

https://lokalise.com/blog/angular-i18n/

Yet I'm having some trouble understanding the PLACEHOLDER SYNTAX.

Now as an example in my application, I want to simply translate the following:

 <p i18n="Records|Displaying first records@@displayRecords">
   (displaying first {{ searchResultLimit }} records)
 </p>

and in my component, we have:

    initSubscriptions(): void {
        this.subscriptions
            .add(
               ...
            )
            .add(
                ...
            )
            .add(this.searchService.searchResultLimit$.subscribe({
                next: (resp) => (this.searchResultLimit = resp)
            }));
    }

and in the i18n Spanish XLF file (source.es.xlf) we defined id="displayRecords" :

<trans-unit id="displayRecords" datatype="html">
        <source> (displaying first <x id="INTERPOLATION" equiv-text="{{ PH }}"/> records) </source>
        <target> (Primeros <x id="INTERPOLATION" equiv-text="{{ PH }}"/>) </target>
        <note priority="1" from="description">Displaying first records</note>
        <note priority="1" from="meaning">Records</note>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/admin/test123/myHtml.component.html</context>
          <context context-type="linenumber">26,28</context>
        </context-group>
      </trans-unit>

Question is: what does it seem to work regardless of what placeholder name I give it?

For example, {{PH}} works fine - but I can put ANY name in there and it still works:

  <x id="INTERPOLATION" equiv-text="{{ PH }}"/>

i.e. enter image description here



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source