Developing a UI library for Angular, I had strings that needed be hardcoded. The question became how do I deal with them. I did not want to embed in ngx-translate into the library. I wanted the user to have the ability to modify the strings as well. So I created a LanguageService.

import { Injectable } from '@angular/core';
import {BehaviorSubject, Observable, Subscription} from "rxjs";

@Injectable({
  providedIn: 'root'
})
export class LanguageService {

  private _editLabel: string = "edit";
  private _deleteLabel: string = "delete";
  private _undoLabel: string = "undo";
  private _clearLabel: string = "clear";
  private _saveLabel: string = "save";
  private _searchLabel: string = "search";

  public editSub:BehaviorSubject<string>;
  public deleteSub:BehaviorSubject<string>;
  public undoSub: BehaviorSubject<string>;
  public clearSub: BehaviorSubject<string>;
  public saveSub: BehaviorSubject<string>;
  public searchSub: BehaviorSubject<string>;

  constructor() {
    this.editSub = new BehaviorSubject<string>(this._editLabel);
    this.deleteSub = new BehaviorSubject<string>(this._deleteLabel);
    this.undoSub = new BehaviorSubject<string>(this._undoLabel);
    this.clearSub = new BehaviorSubject<string>(this._clearLabel);
    this.saveSub = new BehaviorSubject<string>(this._saveLabel);
    this.searchSub = new BehaviorSubject<string>(this._searchLabel);
  }


  get editLabel(): string {
    return this._editLabel;
  }

  set editLabel(value: string) {
    this._editLabel = value;
    this.editSub.next(value);
  }

  get deleteLabel(): string {
    return this._deleteLabel;
  }

  set deleteLabel(value: string) {
    this._deleteLabel = value;
    this.deleteSub.next(value);
  }

  get undoLabel(): string {
    return this._undoLabel;
  }

  set undoLabel(value: string) {
    this._undoLabel = value;
    this.undoSub.next(value);
  }

  get clearLabel(): string {
    return this._clearLabel;
  }

  set clearLabel(value: string) {
    this._clearLabel = value;
    this.clearSub.next(value);
  }

  get saveLabel(): string {
    return this._saveLabel;
  }

  set saveLabel(value: string) {
    this._saveLabel = value;
    this.saveSub.next(value);
  }

  get searchLabel(): string {
    return this._searchLabel;
  }

  set searchLabel(value: string) {
    this._searchLabel = value;
    this.searchSub.next(value);
  }
}

The idea is quiet simple. I define out the string that I want to have or may want translated. Each string was given a “default” value so there would be no requirement for a user to translate these strings or even interact with my service, if they didn’t need to.

Next, I created BehaviorSubjects for these values and in the setters, I made the call to pass the value. My UI components can get the values of these strings immediately with the getter, and subscribe to get any changes to those strings later. Thus making it possible to change the language on the fly.

Now the user of my library if they desire only needs to call the setters on my service to pass in the new text or translated text if they want it changed.