angular typescript: translate string literals in templates

Question

I have the following link:

<a (click)="modal.confirm('Do you want exit the system?', exit)" i18n>Sign out</a>

And I would like to translate the string 'Do you want exit the system?', but I can't figure out how to achieve it. Is that possible?

I didn't found anything related to this situation in the official documentation: https://angular.io/guide/i18n

Actually, I'd say no. I remember of someone that found a workaround with viewChilds though : he created HTML tags that contained the sentences to translate, and requested them via a service made for this. — user4676340
– user4676340, Commented Feb 20, 2018 at 14:51

Shaik Mahaboob Basha · Accepted Answer · 2018-02-20 14:55:20Z

1

Check https://github.com/ngx-translate/core

If you want it inside the component, you will have to use the instant method The code would be

translateService.instant('key');

Where key is the string which comes from the locale file

If you want it from the view/tempalte

<a (click)="modal.confirm('{{ "key" | translate }}', exit)" i18n>Sign out</a>

answered Feb 20, 2018 at 14:55

Shaik Mahaboob Basha

1,0825 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Cequiel · Accepted Answer · 2018-02-20 16:45:38Z

0

I finally addressed it this way:

<a #signOutLink (click)="modal.confirm(signOutLink.dataset.message, exit)"
  i18n-data-message="@@signOutMessage" data-message="Do you want exit the system?"
  i18n-title="@@signOut" title="Sign out"><i class="fa fa-sign-out"></i></a>

Or, if we do not want to use a redundant data-binding, we can use the following approach:

<a (click)="modal.confirm($event.currentTarget.dataset.message, exit)"
  i18n-data-message="@@signOutMessage" data-message="Do you want exit the system?"
  i18n-title="@@signOut" title="Sign out"><i class="fa fa-sign-out"></i></a>

I initialized the data-message attribute with a default message and then I used the i18n-data-message attribute to translate the message to the corresponding language. And it worked.

edited Feb 20, 2018 at 16:45

answered Feb 20, 2018 at 16:39

Cequiel

3,8077 gold badges31 silver badges46 bronze badges

Collectives™ on Stack Overflow

angular typescript: translate string literals in templates

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related