dx-button not working properly with @ngneat/transloco pipe

[arndwestermann]

I found an issue where working with @ngneat/transloco is not showing the translation when setting it to the body of the dx-button. It will work with the transloco directive and if I set the text attribute. But in my custom dialog component (wrapped dx-popup) i specified some buttons and set the text in the body with the transloco pipe and this somehow works.

Small side note, setting the text attribute and changing the height doesn't center the text. This might not correlate with the transloco problem, but it is still weird.

I made a Stackblitz project, where you can see the problem in action. https://stackblitz.com/edit/angular-ivy-5yzupo If you made some changes to the code on Stackblitz, you probably have to reload the whole site, cause the dx-popup won't open after changes.

Steps to Reproduce:

1. Add @ngneat/transloco to your project
2. declare a button the following way: <dx-button (onClick)="showDialog()" type="danger"> {{ 'Some.Translation' | transloco }} </dx-button>

Results You Received:

No text displayed when using the transloco pipe inside a button

Results You Expected:

Text to be displayed when using the transloco pipe inside a button

Environment Details:

angular 11 devextreme 20.2.6 devextreme-angular 20.2.6 @ngneat/transloco 2.20.1

[hakimio]

Maybe you should try binding text property?

<dx-button
    [text]="'Some.Translation' | transloco"
></dx-button>

[arndwestermann]

Don't get me wrong, but I tried it and I even mentioned that in my issue description. When i set the text attribute it doesn't center the text, when i change the height to be smaller

Small side note, setting the text attribute and changing the height doesn't center the text. This might not correlate with the transloco problem, but it is still weird.

Nonetheless it works in my wrapped component, also described in the issue.

But in my custom dialog component (wrapped dx-popup) i specified some buttons and set the text in the body with the transloco pipe and this somehow works.

You can check out the stackblitz repo I setup, I've described everything i noticed there.

[enua]

Maybe is the TranslocoModule: is not imported anywhere.

[arndwestermann]

The problem is that it doesn't render correctly, not that it isn't showing anything. If you look at the Stackblitz, you can see it.

[enua]

You right, in my projects I'm importing the exported TranslocoModule in each module to render it;

Maybe this can help some devexpress coders or even you:

If you add a character before it works :(

EDIT: Ive the same problem as you and I used the long way (i dont like it: why declare var inside component when i could easy translate with the pipe, but it works while they fix this issue)

<dx-button
    *transloco="let t"
    [text]="t('sidebar.submit')"
    [disabled]="!form.valid"
    (onClick)="handleSubmit()"
  ></dx-button>