Core: Directive approach does not work

[stevermeister]

I'm submitting a ...

[ x ] bug report
[ ] support request
[ ] feature request

Current behavior
Directive approach
<span [translate]="HELLO'"></span>
does not update the text when I switch to another language.
http://stackoverflow.com/questions/42349738/ngx-translate-pipe-vs-directive

plunker - https://plnkr.co/edit/PykLBrZGI1jz7Imsnzz6?p=preview

[Verurteilt]

Pretty weird, I think this problem could be related to the checkNodes function inside the directive, anyway, if you change your code to this one, it works:

<h2 translate>HOME.TITLE</h2>

Plunker: https://plnkr.co/edit/AKy99ttZz63Rht4tufby?p=preview

[stevermeister]

I know about the option
<h2 translate>HOME.TITLE</h2>

but actually the idea, why I want to use exactly directive approach is I still want to keep original text in template, i.e.:

<span [translate]="HELLO'">Hello Dear User</span>

[xtgrant]

Hi @stevermeister
I'm having the same issue. When using directive as attribute with value,

will not work because the checkNodes function only queues elements with text length > 0.
Because <span> has no text length, the checkNodes method will not go into the for loop.

From DOM childNodes method documentation::
Whitespace inside elements is considered as text, and text is considered as nodes. Comments are also considered as nodes

If you add a space in the <span> </span>, it will work.
The space gives <span> a length of 1 and it goes into the loop.

This is in fact a bug. There should be a case where if childNodes length is empty, it should still render text.

[stevermeister]

@xtgrant

you probably did not get my point, I have more than space in between:

<span [translate]="'HELLO'">Hello Dear User</span>

and it still does not work when I change the language

[xtgrant]

Oh, if this code sample is from your actual code, then it's your syntax. you are missing single quote before the HELLO.
<span [translate]="'HELLO'">

[stevermeister]

I provided a plunker with exact code, you can check there. Quotes are on their place

[xtgrant]

Found this:
https://github.com/ngx-translate/core/issues/355

So, it's not related. The directive selectors were already given the type @Input.
Maybe its isolated scope, with that syntax, and only applies once on load.

[stevermeister]

yes, #355 looks similar.

it should do the check
https://github.com/ngx-translate/core/blob/master/src/translate.directive.ts#L85

I think I need to dive in code myself, otherwise I'll never get an answer here :)

[sGerli]

I'm having the same issue with directive, they aren't updating.

[f1ssl]

Had the same problem, but

<span [translate]>HELLO</span>

did it for me.

But i think this is not the total solution. Will there be a bugfix concerning this issue?

[stevermeister]

ideally I would like to have response from @ocombe for this issue

[ocombe]

Seems like a bug to me: when the key is forced it doesn't detect changes because the key is always the same...
We should always set node.lastKey = null; when forceUpdate is true in the checkNodes method for the directive