How to get a I18n variable value I can return to my Angular parent component?

Question

I'm new to Angular and I just put in place an i18n (2 languages) system for a website I am creating. Everything works properly but in order to switch from one language to another in my header, I feel stuck.

I followed the Angular documentation to transfer my variables from child to parent component and I ended with this:

<input type="text" id="item-input" #lang>
  <button type="button" (click)="changeChosenLang(lang.value)">
    {{ 'global.lang' | translate }}
  </button>

As you can see, I write my language in the input form and I send it to the proper component with a button. What I wanted was to click on my 'global.lang' text and to be able to send its value to the parent component, since the value is the language which is not actually used.

I don't know how to put my 'global.lang' text in a variable, neither what kind of balise I can use. Also I didn't know how to summarize my problem to search for it on StackOverflow so if you know a similar post, don't hesitate to post the link.

Thank you for your reading!

Answer 1

I found a less tortured way (poor brain) to have the result I wanted:

<span (click)="changeChosenLang()">
    {{ 'global.lang' | translate }}
  </span>

First I temporary changed my button to a span balise and I deleted the parameter from my changeChosenLang() function. Then, I transferred a variable 'lang' from my parent component to this one, witch contains the value of the language chosen in my app constructor. At each click, I change its value in my changeChosenLang() function and everything works great!

I hope it can help someone someday. The moral of this post is: the simpler, the better. Have a good day.