Dynamically interpolated variable is not translated when variable changes

[dpmott]

Current behavior

When a variable (such as a Component attribute used in a template, holding a translation key) is used with the translate directive on an element with content which includes an interpolated variable, it is initially translated correctly, but when the value is later changed, the displayed text is untranslated.

As an example, the template would use the translate directive like this: <div translate>{{ weekday }}</div>

Expected behavior

The key value in the variable should be translated and displayed whenever the variable is updated.

How do you think that we should fix this?

https://github.com/ngx-translate/core/pull/1169

Minimal reproduction of the problem with instructions

https://stackblitz.com/edit/github-7csm2q

Click the "Click Me" button. Select a different language. Notice that the middle line misbehaves.

Environment

ngx-translate version: 12.1.1
Angular version: 8.2.14

Browser:
- [X] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

For Tooling issues:
- Node version: v10.18.1
- Platform:  Windows

Others:

[xsegrity]

I am having the same problem with v12.1.1 after upgrading to angular v9. As a workaround I was able to change the directive <div translate>{{ myvar }}</div> to use a pipe <div>{{ myvar | translate }}</div>.

[anth-git]

I have the same problem. It's not working since version 12, so I'm stuck with 11. Any plans for fixing this?