how to add a step to elements which are in loop

[sou-s]

Describe the bug A clear and concise description of what the bug is.

To Reproduce Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior A clear and concise description of what you expected to happen.

Screenshots If applicable, add screenshots to help explain your problem.

Details (please complete the following information):

• Browser [e.g. chrome, safari] + version
• List of the dependencies with their version (Angular, rxjs, ngx-joyride,...)

Additional context Add any other context about the problem here.

[tnicola]

Hi @sou-s , do you mean by that?Elements that are in a for loop (*ngFor)? I will be glad to help, can you provide further details please?

[sou-s]

baMenu.zip

I have attached the code. It's for menu bar. I need steps for each ba-menu-item which has for loop in baMenu.html.

[tnicola]

Thanks for the code, it helps me a lot to resolve your request. To add the step to elements that are in a loop you can do something like this:

 <ba-menu-item
    ...
    joyrideStep="menuItemN{{i}}"
    *ngFor="let item of menuItems; index as i"></ba-menu-item>`

And then, in your typescript code you will have:

this.joyrideService.startTour(
      { 
            steps: [
                      'menuItemN0', 
                      'menuItemN1', 
                      'menuItemN2',
                       ...
                     ]
     } 
);

At this point you will need different texts and different titles for each menu item. My suggestion is to create a list of MenuItemWithInfo so shaped:

{     
      title: 'The item title', 
      text: 'the item text',
      item: your item object
}

Then , looping in this way, on these MenuItemWithInfo objects you'll have a complete solution. I can send you back the complete solution using you code if you'd like to.

[sou-s]

Thanks a lot. I have set different title and text to each step dynamically in the loop itself.