CODEWITHSUNDEEP
angulartypescriptinternationalizationliterals
Cequiel
Cequiel

Reputation: 3777

angular typescript: translate string literals in templates

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

Upvotes: 0

Views: 1740

Answers (2)

Cequiel
Cequiel

Reputation: 3777

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.

Upvotes: 0

Shaik Mahaboob Basha
Shaik Mahaboob Basha

Reputation: 1082

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>

Upvotes: 1

Related Questions