Angular i18n dynamic translation in case id is known

First of all I do understand that I am using AOT compilation and this is static. Although, I was wondering if it is possible to load the correct translation if the ID is known (and defined in a source.{language}.xlf file)?

In general I need to gain more understanding of what is going on under the hood, more specifically how does Angular recognises the placeholder to replace?

I am trying to accomplish the following:

  • Backend returns an error code (eg. ‘error_code’);
  • error_code is added to xlf files;
  • Dynamic error component is created to display translated error messages;
  • At this point I am stuck. I do have the ID of the translated element but I think I am missing the last piece of the puzzle.

The following has been tried without any luck:

<p class="message message--warning" i18n="{{error}}"> /* {{error}} = error_code */ {{error}} </p>

I played a bit around with the select options but this does not seem to work as well.

It would be great if someone is able to point me in the right direction.