Core: Translate inside button not working

[AlexKhymenko]

Current behavior

Sometimes when used button with translate - inner content will not translate. The strange thing is some elements will translate on the page, some will not.
Another moment when i use like this it will not translate

<button translate>BACK</button>

But when i add span it works

<button><span translate>BACK</span></button>

The problem I can't reproduce it in stackblitz.
Maybe someone will also have this problem.
It started when i migrated app on angular6.

Expected behavior

How do you think that we should fix this?

Minimal reproduction of the problem with instructions

Environment

ngx-translate version: 10.0.1
Angular version: 6.0.0


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

For Tooling issues:
- Node version: 8.9.4
- Platform:   Windows 

Others:

[AlexKhymenko]

Also found that this problem i found more frequently with disabled buttons,

[reenezden]

Hi all, Has any one gotten a fix for this?
The following syntax fails with no errors
<div translate>text_to_translate</div> <a translate>text_to_translate</a>

Using a span works fine
<span translate works>text_to_translate</span>
or using the following syntax
<div> {{ 'text_to_translate' | translate }} </div>

I'm using angular version 6

Works well for ngx-translate/core version
9.1.1 and 10.0.0

Fails ngx-translate/core version
10.0.1 and 10.0.2

[etiennetalbot]

I found out that it doesn't necessarily needs to be a button to fail...
This works: <button translate>SOMETHING</button>
This fails: <button translate> SOMETHING </button>
This fails:

<button translate>
    SOMETHING
</button>

Even when using preserveWhitespaces: false in the component.
I'm also using Angular 6.
ngx-translate/core 10.0.1 and 10.0.2 have this problem, but not 10.0.0

So this problem appeared when this was merged: https://github.com/ngx-translate/core/commit/cf45ef5

I feel like the problem might be that line 82 compares the content variable instead of the trimmedContent variable...

[etiennetalbot]

It seems that changing if (content !== node.currentValue) { for if (trimmedContent !== node.currentValue) { in translate.directive.ts at line 82 fixes the problem... But it's practically reverting to 10.0.0: spaces in nodes are not an issue anymore, but spaces in the translate values in the json files are back to being problematic. Surely there's a way to make both work...

[etiennetalbot]

Found a fix for both problems. Pull request here: https://github.com/ngx-translate/core/pull/870

[reenezden]

Thanks @etiennetalbot. I had given more detail about the issue here https://github.com/ngx-translate/core/issues/869.

[juri33]

+1 Same issue.
Cant use 10.0.2

[raschle]

+1
problem still exists in 11.0.1

[Kappyh]

Same problem, angular 8 and ngx translate 11.0.1.
Also I'm using a button with disabled behavior.

[UkonnRa]

Still exists, any update?

[Arikael]

not really a solution per se but I switched to transloco for my new project. So far no problems.

[wnabil]

@ocombe The issue still exists and the PR is closed, i can see the code is not updated as well in the directive

https://github.com/ngx-translate/core/blob/efcb4f43a645d9ac630aae8e50b60cc883e675fd/projects/ngx-translate/core/src/lib/translate.directive.ts#L118