Using intro.js in multilingual angular 2 page

[peyman-ghasemi]

Hi there !
I am developing a multilingual web page using angular 2 .
I wanted to add some guide for my users using intro.js ( consider that I am using DefinitelyTyped library ) . it is okay when I write my guides in single language for example by this line :

<div data-step="1" data-intro="some text" >

but when I try to have multilingual guides using ng2-translate , I get nothing. here is my code :

<div data-step="1" data-intro=" 'dashboard.welcome' | translate " >

in data-intro property, I have tested combination of {{ }} , " " or ' ' to see if the syntax is wrong but none of them solved my problem. I wonder if some one can help me .

[millerscout]

Hello,
intro.js, doesn't watch/observe the attributes after the bind, you need either
refresh intro.js manually or use a service to do so.

a possible solution is: start the intro after binding the translated texts.

i'm currently writing ng2-introjs, you may fork and make what you need.

p.s.: i'm still learning angular 2 on free time, so it's not my main task yet

[peyman-ghasemi]

thank you for your answer
but in your solution we can not switch between different languages
and angular 2 doesn't allow to use variables.
so restarting intro or moving it into ngAfterInit can not solve multilingual problem.

[vibingopal]

Hi,

Would you please let me know how you imported intro js module into angular 2 CLI app?

Thanks

[peyman-ghasemi]

Hi,
I have just adopted javascript library in my angular 2 project.

[khurshed52]

Try this one

<div data-step="1" [attr.data-intro]=" 'dashboard.welcome' | translate " >

Thanks

[ebarreraso]

The solution proposed by khurshed52 is the correct one
Just replace data-intro = '' with [attr.data-intro] = ''

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.