Not working with ngx-translate

[iCodr8]

trafficstars

We are using the ngx-translate module to translate all contents of the angular app. The problem is, that it is not working with the title and text attributes of ngx-joyride.

To Reproduce

<div joyrideStep="dashboardStatistics"
         [title]="'TOUR.DASHBOARD_STATISTICS.TITLE' | translate"
         [text]="'TOUR.DASHBOARD_STATISTICS.TEXT' | translate">
    ... more content ...
</div>

Expected behavior The translated text should be visible in the tour window.

Screenshots

Details:

• Browser chrome 76
• @angular/core 7.2.15
• ngx-joyride 2.2.10
• ngx-translate 11.0.1

[rtcimi]

I was/am using it like [title]="TOUR.DASHBOARD_STATISTICS.TITLE"

[iCodr8]

No, that's not working. I want the translated string and not the translation key.

[shifenis]

I'm using ngx-translate too and I can't reproduce your error

[iCodr8]

I think it is a timing problem. Sometimes it will be shown, but the most time not.

[iCodr8]

I have found the problem! Joyride is not working with observables or async operations. The translation is loaded after some milliseconds and joyride uses the empty value before. When I am adding an if condition than it is working, because joyrideStep will be initialized only after the if-condition is true (translation loaded).

But this is a bad solution. Can this be fixed by joyride please?

<div *ngIf="'TOUR.DASHBOARD_STATISTICS.TITLE' | translate"
         joyrideStep="dashboardStatistics"
         [title]="'TOUR.DASHBOARD_STATISTICS.TITLE' | translate"
         [text]="'TOUR.DASHBOARD_STATISTICS.TEXT' | translate">
    ... more content ...
</div>

[tnicola]

Hi @iCodr8 ,

I've tried but I'm not able to reproduce your bug. Could you please reproduce it on a small app?