the selected item is not highlighted

[dfguns89]

Describe the bug

I am using version 2.0.0 of ngx-joyride in my angular application 5.2.11 and there are elements that are not highlighted. it works well in certain places of the html but in others it does not.

As shown in the attached file does not work:
bug.html.zip

[tnicola]

Hi @dfguns89 ,
Can you send me also the typescript file to better understand what is going on?

Thanks

[dfguns89]

The library works well, only that in certain elements it is not highlighted and in others it does. When the error occurs, the popover is generated at the top of the page and not on the item that should. I sent two images with one error and the other correct. Would appreciate your help.

bugNgx.zip

[tnicola]

Thanks for the response and the materials.

• Do you have any error on the browser console?
• Is it really that element (Información) in the panelControl route?

[dfguns89]

-No errors are displayed by console.
-I do not understand what you mean by the second question.
but I'm calling routes this way . this.joyrideService.startTour({ steps: ['firstStep@listaTurnos', 'secondStep@panelControl','thirdStep@verServicio','forthStep@verServicio','fifthStep@alertas','sixthStep@verHorario','seventhStep@editarSitio','eigthStep@editarSitio','ninethStep@editarSitio','tenthStep@editarSitio','eleventhStep@mensajesCorreo','twelfthStep@profesionales','thirteenthStep@listaClientes','fourteenth@calendario','fiftennthStep@reportesEmpresa','finalStep@listaTurnos'], themeColor:'#00FFFFFF' });

-another problem there is when the second step should be shown the last step is shown.

[tnicola]

It seems a problem with the routes. Are you using the @angular/router to navigate across pages?Are you sure all the routes are correct?

Could you try this code and sent back the results, please?

  this.joyrideService.startTour({
      steps: ['firstStep@listaTurnos', 'secondStep@panelControl','thirdStep@verServicio'],
      themeColor:'#00BABA'
     }).subscribe(
            step => {
                console.info('Location', window.location.href, "Path", window.location.pathname);
                console.info('Next:', step);
            },
            e => {
                console.info('Error', e);
            },
            () => {
                console.info('Tour finished');
            }
        );