Angular ICU braces FreeBeta
ByAwesome CrowdinVerified Author

Pre and postprocess Angular ICU variables for Crowdin compatibility

Install

Angular's i18n (internationalization) tool uses the ICU message format, which is a Unicode standardized syntax.

In Angular, ICU strings use curly braces {} to denote a placeholder for a variable value. However, you can also have double curly braces {{ }}, it's a syntax called interpolation, which is used to bind a property of a component to the content of the markup.

For example, if you have a component property name, you can display it in your template with {{name}}.

In the context of internationalization and ICU messages, you might use double curly braces in your messages like this

<div i18n>
  {items.length, plural, 
    =0 {{{name}} has no items in their cart.}
    =1 {{{name}} has one item in their cart.}
    other {{{name}} has {items.length} items in their cart.}
  }
</div>

Double curly braces are considered invalid ICU by many ICU processing libraries, including Crowdin. While you can still translate this syntax with Crowdin, the nice preview in the Crowdin editor will not be available.

This application will preprocess your XLF files and replace double curly braces with a <crowdin> tag.

Note: Your texts will look different in Crowdin than in your resource files, but the <crowdin> tag will disappear when exporting translations and the double braces will be back.

IMPORTANT: When installing the app, make sure you only make the app available for projects where it's needed, as the app may interfere and cause unnecessary changes to your non-Angular XLF files in other projects if installed for all projects.

Crowdin is a platform that helps you manage and translate content into different languages. Integrate Crowdin with your repo, CMS, or other systems. Source content is always up to date for your translators, and translated content is returned automatically.

Learn More
Categories
Development
File Formats
Tags
icu
Works with
  • Crowdin Enterprise
  • crowdin.com
Details

Released on May 30, 2023

Updated on May 30, 2023

Published by Awesome Crowdin

Identifier:angular-icu