Question about translate directive with input element value

I wonder if there is any workaround to make the translate directive works in this HTML template:

<div class="btn-container">
      <input type="submit" class="btn1" value="Login" translate />
</div>

This actually doesn’t work without using the TranslatePipe like this:

<div class="btn-container">
      <input type="submit" class="btn1" value="{{'Login' | translate}}" />
</div>

This works great, but I want to keep my HTML clean because another person is working on the UI separately and we agreed to some rules between us regarding the localization to use the translate directive when possible.

I made a workaround by using <button type="submit"> element instead of <input>, And it worked. However this will not be acceptable if the CSS is applied to a specific element type like .input[type="submit"] which it is in my case.

With some investigations in the source code, I think the problem comes from here:

    private translate(renderNode: any, nodeValue: string, key: string): void {

        this.localization.translateAsync(key, this.params).subscribe(
            (value: string) => {
                this.renderer.setText(renderNode, nodeValue.replace(key, value));
            }
        );

    }

Since we cannot setText on an input element, I suggest checking the type of the renderNode before setting the text, and to support translating input values we might use ‘setElementAttribute’ function.

[robisim74]

@FabienDehopre I will try to fix it in this way: if there is a node value, it translates the node value, otherwise the value attribute: this solution should work also with checkbox and radio. @EslaMx7 If that doesn’t work in all situations, I will revert the feature.

Tonight I will release a new version (I already have another fix to do).

[EslaMx7]

@FabienDehopre Thank you for this important note, it should be working as expected now. @robisim74 That’s really great, Thank you for the fix, everything is making sense now regarding the node value and the value attribute, I hope this fits all.