How can I highlight elements from third-party libraries using ngx-ui-tour in Angular?

[XavierLaRosa]

I'm using ngx-ui-tour in my Angular application and want to highlight specific elements from a third-party library. For example, I'm trying to highlight the right slide button in NGX Bootstrap's Carousel component.

I tried adding tourAnchor="carouselButton" to the element dynamically using JavaScript before I start the tour, but I get the error: "Can't attach to unregistered anchor with id helpIcon"

How can I correctly register and highlight elements that come from third-party components?

[hakimio]

Normally you could use tour-proxy-anchor to target 3rd party elements, but if you are using ngx-ui-tour-ngx-bootstrap library, the tour proxy is not supported. tour-proxy-anchor is supported in all tour UIs except ngx-bootstrap.

[XavierLaRosa]

Thanks for the quick response! Are there plans to add support for NGX Bootstrap?

[hakimio]

I don't have any ideas how to add support for ngx-bootstrap, but if you can come up with some solution, PR is welcome.