i18next escapes HTML special characters in substitutions by default

[Finesse]

This is not a problem in angular-i18next. But I think you can improve the usage experience by considering this i18next feature in any way. It is a problem because Angular escapes special characters too which leads to double-escaping. For example, this code {{ 'greeting' | i18next: { name: '"Google"' } }} gives this string in browser Hello, "Google"!. You can mention this feature in the readme and offer/implement one of the solutions:

• Disable the escaping globally in the i18next configuration:

  i18next.init({
    // ...,
    interpolation: {
      escapeValue: false,
    },
  });

  This is the best solution IMHO because dealing with a raw HTML in Angular is a rare case and one who deals with raw HTML would need to escape the substitutions manually anyway.

• Disable the escaping in the pipe or/and in the service:

  i18next.t(key, {
    ...substitutions,
    interpolation: {
      escapeValue: false,
      ...substitutions.interpolation,
    },
  })

• Disable the escaping in templates: greeting: 'Hello, {{- name}}!'

[Jeremias-Nater]

For people stumbling uppon this on google: a workaround is to use the anguler [innerHtml]="'translateMe' | i18next" attribute.

[Jeremias-Nater]

to revert encoding of characters like & you can use the following function, which uses the browser native behaviour:

export function i18nUnescape( escapedString: string ): string {
  const el = document.createElement( 'div' );
  el.innerHTML = el.textContent = escapedString;
  const unescapedString = el.innerText;
  return unescapedString;
}