Internationalization of Interpolation of error messages in Angular 8

Question

I am Developing Angular Application for Demo purpose and I have implemented Book Store Application , basic Web Api in C# and other.

Now I am using Angular i18n utility to make my Application in french and turkish. I refer to Angular documentation and worked for label, text input and for placeholder. But I have implemented Reactive forms for Sign up and Sign in page. It has various custom Validations based on user input it generates error messages using interpolation by binding different error messages.

How to transalate different messages based on message. ie. error message is "username must be required" so it should be translated in french and if error message is "Email must be required" it should be translated in french.

I have searched for Interpolation and tried based on document but I could not able to find solution.

 <div>
     <p *ngIf="messageerrors" style="color:red" i18n>{{messageerrors}}</p>
</div>

 messageerrors : string = '';

 this.messageerrors = "username must be required";

 this.messageerrors = "Email must be required";

 <!--message.xlf file-->
<trans-unit id="144f3b27d028b0f3d2f79e9ad8996f73703778b3" datatype="html">
    <source>
    <x id="INTERPOLATION" equiv-text="{{messageerrors}}" />
    </source>
    <target>
        <x id="INTERPOLATION" equiv-text="{{messageerrors}}" />
    </target>  
<context-group purpose="location">
    <context context-type="sourcefile">src/app/components/login/login.component.html</context>
    <context context-type="linenumber">8</context>
</context-group>

this.messageerrors = "username must be required"; should show error message as "nom d'utilisateur doit être requis in french."

this.messageerrors = "Email must be required"; should show error message as "Email doit être requis"enter code here

GreyBeardedGeek GreyBeardedGeek · Accepted Answer · 2019-08-21T02:20:49

I've never actually implemented i18n in Angular, but have read the documentation extensively, and the Angular i18n facilities seem quite lacking to me.

Firstly, you need to build and host a separate copy of the application for each translation. Second, and to the point of your question, it appears to only work for text in a template. There doesn't seem to be any support for translating a string variable in a component. Both of these would be deal-breakers for me.

Fortunately, there are other i18n libraries available, for instance, ngx-translate, which can support multiple translations in a single app, and has a pipe, a directive, and a service, so that you can pretty-much translate anything that you want.

Internationalization of Interpolation of error messages in Angular 8

3 Answers