带有动态值的span标签的Angular i18n

Question

I am setting up internationalization for my Angular project and I am facing the following problem:

I have a form page where a user can enter a base URL and an API key to perform REST requests with a provider. I have a button which tests the connection to that provider with the API key and base URL entered by the user by doing an http get call. I am not sure how I can localize a span tag which displays a message whether the provider was successfully pinged. Here's the code for my span tag:

<span class="fd-badge" [class.fd-badge--success]="data?.authenticated" [class.fd-badge--error]="!data?.authenticated">{{data?.authenticated
                    ? 'Connected Successfully': 'Connection Failed'}}</span>

Answer 1

Found the solution to my problem. Instead of using the i18n tags it is better to use the https://www.npmjs.com/package/@ngx-translate/core library. Much more flexible and easier to apply in various html elements.

As for the span tag itself:

<span>{{(data?.authenticated ? 'successConnection' : 'failConnection') | 
translate}}
</span>