scttcper/ngx-toastr

how to translate toastr messessage

alimashal opened this issue · 11 comments

alimashal commented

I just installed ngx-toaster and need to work with two language and I can't translate the message any suggestion?

scttcper commented

How do you usually handle this? I haven't looked into i18n w/ angular yet

alimashal commented 
by using ngx-translate we can translate in different ways like.
<span `translate>{{'success-msg'}}</span>`
or <card  cardTitle="{{'success-mgs' | translate}}"></card>
trevor-hackett commented

If you are using ngx-translate, it might be better if you provide the translated text to ngx-toastr using the TranslateService.

The example on ngx-translate/core looks like this:

translate.get('HELLO', {value: 'world'}).subscribe((res: string) => {
    console.log(res);
    //=> 'hello world'
});

So maybe something like this?

// Set up translations somewhere
translate.setTranslation('en', {
    INVALID_CREDENTIALS: 'Invalid Credentials'
});
translate.setTranslation('es', {
    INVALID_CREDENTIALS: 'Credenciales No Válidas'
});

// At the place of showing a toast
translate.get('INVALID_CREDENTIALS').subscribe((res: string) => {
  toastr.error(res);
});
  • 👍6
  • 🎉1
  • 🚀1
  • 👀1
alimashal commented

thanks a lot Mr Yarrgh it worked

  • 👍1
trevor-hackett commented

I also created a gist with a custom component that would handle the translations for you. This might be better, depending on how often you have to show translated toasts. Observables can get messy if you have to translate the message and the title of a toast.

The gist is located at https://gist.github.com/yarrgh/84ee1cb78cdcdb537cc0c7c203b49216

The component is almost exactly like the original Toast component except it uses the Translate pipe on line 31 and line 36

I also provided an example app.module.ts of using that custom component (sets it up globally).

I haven't actually tested (or even ran) the code, although I think it should work.

  • 👍2
sammirzagharcheh commented

HI Guys,
How Can I use RTL ?

b-jakubowski commented

How do you usually handle this? I haven't looked into i18n w/ angular yet

I use angular custom i18n in my application

<h1 i18n="@@introductionHeader">Hello i18n!</h1>

Is there a way (other then custom component) to support it?
Now when i pass the correct translation key i receive warn in console:

WARNING: sanitizing HTML stripped some content
fateh14 commented

for angular i18n translation of ngx-toastr message check my answer here:
https://stackoverflow.com/a/56074544/4399281

pvkrijesh commented

@yarrgh Unfortunate the result display only Key not value..
translate.get('INVALID_CREDENTIALS').subscribe((res: string) => {
this.toasterService.pop(this.createToast("success","Success", res);
});
Pop up gives the INVALID_CREDENTIALS instead Invalid Credentials

  • 😕1
krzyhan commented

You can always use your own service to translate message before showing toast.

Ex. here: https://gist.github.com/krzyhan/079989d41d7dbf9de26ee79ef71ffcdc