how to translate toastr messessage

[alimashal]

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

[scttcper]

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

[alimashal]

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]

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);
});

[alimashal]

thanks a lot Mr Yarrgh it worked

[trevor-hackett]

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.

[sammirzagharcheh]

HI Guys,
How Can I use RTL ?

[b-jakubowski]

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]

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

[pvkrijesh]

@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

[krzyhan]

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

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

[xewertonfilipe]

The best example using json file

https://stackoverflow.com/questions/46155989/ngx-translate-with-dynamic-text-on-ts-file