Current behavior

Template elements which use the translate directive and whose value are surrounded by newlines do not respond to language changes. If that value is interpolated from an angular variable, it's not initially translated at all the initial value is translated, but changes to the variable cause the original key text to be displayed, and at no point does it appear to respond to language changes.

See also: #998 (comment)
Possibly related: #1091

Expected behavior

translate directive properly translates the specified value.

How do you think that we should fix this?

Unknown. The issue appears to pre-date release 12.0.0, although
#998 / #1016 appears to have made things a bit worse in that interpolated variables are not translated at all now don't respond to language changes now.

Minimal reproduction of the problem with instructions

Specify a translated div or span in the angular template file, which includes newlines around the value to be translated:

  <div translate>
    {{ myVariable }}
  </div>
  <div translate>
    HEADER.NAME
  </div>

In the component implementation file:

  myVariable = 'HEADER.TITLE';
  // in ngOnInit():
  setTimeout(() => { this.myVariable = 'HEADER.NAME' }, 1000);

In the en.json file:

{
  "HEADER": {
    "TITLE": "The Title",
    "NAME": "The Name"
}

Environment

ngx-translate version: 12.0.0
Angular version: 8.2.14

Browser:
- [X] Chrome (desktop) version XX
(Haven't checked other browsers yet)
 
For Tooling issues:
- Node version: v10.18.1
- Platform:  Windows