CODEWITHSUNDEEP
angularangular-i18n
witosh
witosh

Reputation: 129

Angular i18n with two different links

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>

Upvotes: 0

Views: 948

Answers (2)

Leonel L&#243;pez
Leonel L&#243;pez

Reputation: 1

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:

  1. In the component.ts file add all the links URL as variables:

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

  1. Then add this variables to the component.html file using property binding:

    <a [href]="link1"> my link </a>

  2. 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>

Upvotes: 0

witosh
witosh

Reputation: 129

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.

Upvotes: 1

Related Questions