Giters

scttcper / ngx-toastr

🍞 Angular Toastr

Home Page:https://ngx-toastr.vercel.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

how to translate toastr messessage

alimashal opened this issue · comments

commented

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

commented

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

commented 
by using ngx-translate we can translate in different ways like.
<span `translate>{{'success-msg'}}</span>`
or <card  cardTitle="{{'success-mgs' | translate}}"></card>
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);
});
commented

thanks a lot Mr Yarrgh it worked

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.

commented

HI Guys,
How Can I use RTL ?

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
commented

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

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

commented

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

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