Angular - RxJS - Observable and method return

Question

I have a method in my Angular 9 application which looks like this:

createTitleHTMLText(calendarEventObject: CalendarEventObject): string { 
this.translateService.get(calendarEventObject.calendarEventTyp).subscribe((res: string) => {
  const title = '<span><b>' + calendarEventTyp + '</b></span>;
  return title;
});

}

This method should return a string but how to do it - to get the translation I need an Observable and the further code has to be in der Observable - result block. Actually I don't know how to do it - is there a way to synchronize Observables or what is the best way to do it?

Answer 1

It is a little unclear at the moment. You are subscribing to the HTTP request but not using it's result. What is the value of res here? Nevertheless I guess what you need is the following

createTitleHTMLText(calendarEventObject: CalendarEventObject): string { 
  this.translateService.get(calendarEventObject.calendarEventTyp).subscribe((res: string) => {
    return '<span><b>' + res + '</b></span>';
  });
}

Answer 2

I use it like in this example:

fetchEvents(): void {
  this.events$ = this.datechoiceService.getPreparedCalendarEventsOfUser(this.user.id, this.view, this.viewDate)
 .pipe(
   map(results => {
     return results.map((calendarEventObject: CalendarEventObject) => {
      let calendarEvent: CalendarEvent<{ calendarEvent: CalendarEvent<any>; }> = {
        id: calendarEventObject.id,
        actions: this.actions,
        start: new Date(calendarEventObject.startsAt),
        end: new Date(calendarEventObject.endsAt),
        title: this.createTitleHTMLText(calendarEventObject),
        ...
      };
      return calendarEvent;
     })
   })
 );

}

Answer 3

You can convert an observable into promise and you can use async / await,

async createTitleHTMLText(calendarEventObject: CalendarEventObject): string {
    const calendarEventTyp = await this.translateService.get(calendarEventObject.calendarEventTyp).toPromise();
    return '<span><b>' + calendarEventTyp + '</b></span>';
}

Answer 4

If I understand right you have an Observable which emits a string, eg an http call to a remote service that returns (asynchronously) a string. In your case the service is this.translateService.get(calendarEventObject.calendarEventTyp) .

Then you have a method, createTitleHTMLText(calendarEventObject: CalendarEventObject) , which invokes the service and you would like this method to return the string emitted by the asynchronous service.

If this is what you want, you simply can not achieve it. The reason is that the service is asynchronous.

What you may want to explore is a solution along these lines

createTitleHTMLText(calendarEventObject: CalendarEventObject): Observable<string> { 
  this.translateService.get(calendarEventObject.calendarEventTyp).pipe(
     map((res:   string) =>. '<span><b>' + calendarEventTyp + '</b></span>')
  )
}

In this version, createTitleHTMLText function returns an Observable to whoever is interested. Such Observable can actually be subscribed where needed, maybe using the Angular async template pipe.