What is the purpose of custom id?

When you change the translatable text, the Angular extractor tool generates a new id for that translation unit. Because of this behavior, you must then update the translation file with the new id every time.

For example, the translation file messages.de.xlf.html has generated trans-unit for some text message as below

<trans-unit id="827wwe104d3d69bf669f823jjde888" datatype="html"></trans-unit>

You can avoid this manual update of id attribute by specifying a custom id in the i18n attribute by using the prefix @@.

<h1 i18n="@@welcomeHeader">Hello i18n!</h1>