search

tnicola / ngx-joyride

Angular Joyride/Tour library
https://tnicola.github.io/ngx-joyride/
MIT License
245 stars 94 forks source link

Not working with ngx-translate #73

Open iCodr8 opened 5 years ago

iCodr8 commented 5 years ago

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

Bildschirmfoto 2019-09-20 um 15 05 01

Details:

rtcimi commented 5 years ago

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

iCodr8 commented 5 years ago

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

shifenis commented 5 years ago

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

iCodr8 commented 5 years ago

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

iCodr8 commented 5 years ago

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 commented 4 years ago

Hi @iCodr8 ,

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