Binding a typescript variable to translate service

Question

I'm trying to have a TypeScript variable bind to the translate service just like binding in the HTML markup, which works fine.

Here's what I've tried so far

ngOnInit() {

    this.customTranslateService.get("mainLayout.userProfileDropdown.changeLocale").subscribe((result) => {
      this.changeLocaleText = result;
    })

    this.customTranslateService.translateService.onLangChange.subscribe((event: LangChangeEvent) => {
      this.changeLocaleText = this.customTranslateService.instant("mainLayout.userProfileDropdown.changeLocale");
    });

    this.userProfileMenuOptions = [
      {
        text: this.changeLocaleText, itemId: "LocaleSelect"
      },
      {
        text: "Report a bug", itemId: "BugReport"
      },
      {
        text: "Request a feature", itemId: "FeatureRequest"
      },
      {
        text: "Log Out", itemId: "LogOut"
      }
    ];

  }

customTranslateService is just a service that wraps TranslateService.

The first subscription works ok, but when I switch languages, the onLangChange does trigger, changing the variable content correctly, but userProfileMenuOptions's reference to changeLocaleText is not binded therefore not updated.

Using a BehaviorSubject can't really be done here as it is typescript code, not html markup that can use the async pipe.

Maybe recreating the userProfileMenuOptions array everytime the language change subscription is called could be an option, although I'm not sure the component that uses the array will like it.

PS: instant will work here because I have an application loader that loads all available languages before the application is available to the user.

Any ideas ?

You are thinking synchronous (line by line) while your code will be executed asynchronous. The 'subscribe' will be executed later, and only whatever is inside its block code will be executed. In your case you just update the local variable, but the reference on userProfileMenuOptions won't change. Updating the userProfileMenuOptions[0].text inside the block would fix your problem. — Felipe Issa, Jul 08 '22 at 18:49

score 1 · Accepted Answer · answered Jul 08 '22 at 15:35

ngOnInit() {

    this.customTranslateService.get("mainLayout.userProfileDropdown.changeLocale").subscribe((result) => {
      this.changeLocaleText = result;
    })

    const getUserPorfileMenuOptions = (changeLocaleText: string) => {
      return [
        {
          text: this.changeLocaleText, itemId: "LocaleSelect"
        },
        {
          text: "Report a bug", itemId: "BugReport"
        },
        {
          text: "Request a feature", itemId: "FeatureRequest"
        },
        {
          text: "Log Out", itemId: "LogOut"
        }
      ];
    }

    this.customTranslateService.translateService.onLangChange.subscribe((event: LangChangeEvent) => {
      this.changeLocaleText = this.customTranslateService.instant("mainLayout.userProfileDropdown.changeLocale");
      this.userProfileMenuOptions = getUserPorfileMenuOptions(this.changeLocaleText);
    });

    this.userProfileMenuOptions = getUserPorfileMenuOptions(this.changeLocaleText);

  }

that was easy, I overcomplicated it it seems. remove the `this` reference in `getUserPorfileMenuOptions` though. — Francis Ducharme, Jul 08 '22 at 15:49

Binding a typescript variable to translate service

1 Answers1