Apply param with the translate service and array of strings

Question

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

How can I apply with the array like so?

 setPayPal(): void {
    this.translateService.get(['Client.Pay-With-PayPal', 'Client.Please-Click-And-Make-The-Payment',
     ]).subscribe(res => {
        this.payPal = {
          title: res['Client.Pay-With-PayPal'],
          payPalUrl: environment.payPalUrl,
          description: res['Client.Please-Click-And-Make-The-Payment'] 
        };
      });
  }

I can get that value like so: value: environment.parcelDeliveryCost

gr.json

"Please-Click-And-Make-The-Payment":"Bitte anklicken und die Bezahlung von {{value}} vornehmen",

So my question here is how to apply it with the array?

I don't know if that's built in, but can't you do it yourself with `forkJoin`? — jonrsharpe, Jun 07 '20 at 17:10
@jonrsharpe Oh.. This is a great tip. I'll try that and will let you know. Thanks! — Sampath, Jun 07 '20 at 17:12
@jonrsharpe Yes, it is working perfectly fine. Would you like to put it as an answer? This is the `gist`: https://gist.github.com/Sampath-Lokuge/a1d978e3cb8f9f04c53b17facf9ec2cb — Sampath, Jun 07 '20 at 19:10

score 2 · Accepted Answer · edited Jun 07 '20 at 19:44

OP's Answer

setPayPal(): void {

    forkJoin([this.translateService.get(['Client.Pay-With-PayPal', 'Client.Pay-Now']),
    this.translateService.get('Client.Please-Click-And-Make-The-Payment', { value: environment.parcelDeliveryCost })])
      .subscribe(([res1, res2]) => {
        this.payPal = {
          title: res1['Client.Pay-With-PayPal'],
          payPalUrl: environment.payPalUrl,
          description: res2,
          parentButtonText: res1['Client.Pay-With-PayPal'],
          childButtonText: res1['Client.Pay-Now'],
        };
      });
  }

Original Answer

You could trigger multiple observables using RxJS forkJoin, combineLatest or zip methods based on the nature of observables and requirement. Try the following

forkJoin({
  'Client.Pay-With-PayPal': this.translateService.get('Client.Pay-With-PayPal'),
  'Client.Please-Click-And-Make-The-Payment': this.translateService.get('Client.Please-Click-And-Make-The-Payment')
}).subscribe(
  response => {
    this.payPal = {
      title: response['Client.Pay-With-PayPal'],
      payPalUrl: environment.payPalUrl,
      description: response['Client.Please-Click-And-Make-The-Payment'] 
    };
  },
  error => {
    // handle error
  }
);

Note that forkJoin only emits when all the observables complete. If they are persistent observables and you wish to use only the first emitted values, you could use combineLatest method and pipe in a take(1) operator.

One more thing, while forkJoin has an overload to accept plain objects as arguments (like shown above), the combineLatest and zip do not have them. The arguments should be an array.

Yes, `forkJoin` works. But should I unsubscribe it? I know there is no need to unsubscribe the plain `translateService.get()` Subscription. But what about `forkJoin`? — Sampath, Jun 07 '20 at 19:25
It is always better to unsubscribe from the observables in Angular, including the ones from HttpClient. There is always a probability where the router is redirected to another component while the subscription is still in progress. In that case it might be left open. — ruth, Jun 07 '20 at 19:27
Yes, but here it is different. Please see here: https://github.com/ngx-translate/core/issues/796#issuecomment-401114459 — Sampath, Jun 07 '20 at 19:33
Then in this case unsubscription isn't required. `forkJoin` doesn't modify the observables like operators that return a new modified observable. It is still the source observable that is directly subscribed to. — ruth, Jun 07 '20 at 19:40

Apply param with the translate service and array of strings

1 Answers1