Browser translate causes interpolates values to NOT update

[chrxs]

We have an issue where the date picker is translated to German
The users browser gives them the option to translate the page (say to English for example)
The user does this and translates the page to English
The interpolated text values ({{monthName}} for example) no long update when changing months

This is the original HTML for the month names:

<div class="dp-calendar-nav-container">
  <div class="dp-calendar-nav-container-left">
    <button class="dp-calendar-nav-left" type="button"></button>
  </div>
  <span class="dp-nav-header">November 2017</span>
  <button class="dp-nav-header dp-nav-header-btn" type="button" hidden="">
    November 2017
  </button>
  <div class="dp-calendar-nav-container-right">
    <button class="dp-calendar-nav-right" type="button"></button>
  </div>
</div>

...and this is the HTML after the browser translates:

<div class="dp-calendar-nav-container">
  <div class="dp-calendar-nav-container-left">
    <button class="dp-calendar-nav-left" type="button"></button>
  </div>
  <span class="dp-nav-header">
    <font style="vertical-align: inherit;">
      <font style="vertical-align: inherit;">November 2017</font>
    </font>
  </span>
  <button class="dp-nav-header dp-nav-header-btn" type="button" hidden="">
    <font style="vertical-align: inherit;">
      <font style="vertical-align: inherit;">November 2017</font>
    </font>
  </button>
  <div class="dp-calendar-nav-container-right">
    <button class="dp-calendar-nav-right" type="button"></button>
  </div>
</div>

You can see some <font> tags have been added, after this changes don't seem to update these tags.

Angular version: 4.4.4
I have only seen this on Google Chrome browser.

[chrxs]

...a side note, we've had this problem throughout our entire app, and have gone through changing all

<div>{{value}}</div>

to:

<div [innerText]="value"></div>

It seems to resolve the problem, with no perceived side effects, presumably because it replaces the contents on the HTML element and removing the <font> tags generated by the translation.

[vlio20]

Did you find any mention for this on Angular's site? Seems like something that should happen a lot.

[chrxs]

I know what you mean, but we weren't able to find any information about it, when we search "translate" we just kept getting results about angular's i18n and the translate service, not the browsers translation feature

[vlio20]

thanks for the PR, fixed in 8f6d69e

[vlio20]

@chrxs, the gif you posted, is it this your implementation of this component?

[chrxs]

Yeah, that's right

[vlio20]

what version are you using? the nav buttons of 2.6.0 are not placed like in the image

[chrxs]

oh i see what you mean, not the latest version, we're using version 2.4.0

[vlio20]

so be ready to implement some changes if you want to use 2.6.1

[chrxs]

ok will do 😄 thanks