Angular i18n with two different links

Question

I have an angular app with implemented i18n for choosing language depends on customer will. Now I want to set up a footer with a link which will be redirected to a differing site depends on language e.g. link1="https://en.wikipedia.org/wiki/Angular_(web_framework)" link2="https://de.wikipedia.org/wiki/Angular" , so I will have one alias which will be redirected to different sites depends on the chosen language.

I tried to use angular pipes but I have no idea how to set up.

<a href="'" class="footer__link">{{'footer.angular' | translate}}</a>

What do you mean exactly?I installed i18n npm package in this project and I tried to use pipes to achive that what i describe. Maybe there is another way to implemented that. — witosh, Nov 26 '19 at 20:15
You can try using [ngx-translate](https://github.com/ngx-translate/core). I don't know if there is a native Angular one, but this one is great. — Nicolas, Nov 27 '19 at 00:57

score 1 · Answer 1 · answered Nov 27 '19 at 09:47

Ok, So I have installed ngx-translate to project set up service, etc. To got different value key depends on language I use property binding in Angular. Angular grabbing property from i18n .json and setting my variable.

footer.angular.link="https://en.wikipedia.org/wiki/Angular_(web_framework

and

<a [href]="'footer.angular.link' | translate" class="footer__link">{{'footer.angular' | translate}}</a>

It's quite easy solution but maybe someone will have better solution.

score 0 · Answer 2 · edited Feb 01 '23 at 16:12

I had the same issue while trying to provide different links depending on the locale language to be translated.

The solution to make it work was the following:

In the component.ts file add all the links URL as variables:
```
link1 = localize$`https://en.example-link1.com`;
```

Then add this variables to the component.html file using property binding:
```
<a [href]="link1"> my link </a>
```

In the translation file I get the source with link1 and just have to provide link2 as a target when the page is translated.

<source>
  link1 = localize$`https://en.example-link1.com`;
</source>

<target>
  link2 = localize$`https://de.example-link2.com`;
</target>

Angular i18n with two different links

2 Answers2