Issue using dynamic components

[sander-spruit]

Describe the bug
Ngx-joyride is great, but it appears to have an issue with dynamic components. I'm using it with Leaflet (not sure if it is relevant) and adding data attributes to a Polygon. However, the step is skipped by Joyride.

To Reproduce
Code to add data attributes is the following;

let demoArea: HTMLElement = polygon.getElement();
demoArea.setAttributeNS(null, 'joyrideStep', 'demoArea');
demoArea.setAttribute('title', 'Test title');
demoArea.setAttribute('text', 'test');

Which results in
<path class="leaflet-interactive" stroke="#12FE28" stroke-opacity="1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#12FE28" fill-opacity="0.2" fill-rule="evenodd" d="M-216 418L-147 342L29 521z" joyrideStep="demoArea" title="Test title" text="test"></path>

Even adding a Timeout on startTour() does not resolve the issue.

[CodeMagic]

Was looking into something similar myself the other day.

TL;DR
Adding directives dynamically is technically possible but not really supported by Angular. It may not be possible with what you're doing. And even if it is it will probably require some code gymnastics.

Longer Answer
joyrideStep isn't just an attribute you can arbitrarily add to HTML. It's an Angular Directive. So, calling setAttribute certainly results in the markup looking correct at runtime. But it doesn't result in the all the directive stuff being constructed properly. I was able to use this answer to get my use case working. Basically, you have to construct a new JoyrideDirective() in TypeScript.

Trouble is, that constructor requires a ViewContainerRef to the place you want the Joyride Step to show up. As far as I can tell, you can only get a ViewContainerRef via:

Constructor injection on a Directive

class MyDirective {
    constructor(myRef: ViewContainerRef) {
    }
}

Using a template reference variable and ViewChild/ViewChildren

<path #myPathReference ...>

@ViewChild('myPathReference', { read: ViewContainerRef }) myPathRef: ViewContainerRef;

I haven't used Leaflet, but as it's not an Angular library, I suspect you will have difficulty getting a ViewContainerRef to pass into JoyrideDirective's constructor.