Is there a way to use optional attributes?

[ghost]

Suppose I have a bunch of dynamically loaded divs and I want only one of them have the tourAnchor attribute based one some condition. I could achieve this using:

[attr.tourAnchor]="(some_condition) ? 'anchor_id' : nulll"

This way, the attribute only shows up on the desired element from a dynamically loaded list of elements. The issue is that ngx-ui-tour cannot attach to elements like this.

// Start the service after the initialization is done
this.tourService.initialize$.subscribe(() => {
    this.tourService.start();
});

this.tourService.initialize([
            {
                anchorId: 'anchor_id',
                content: 'Test',
                title: 'First step',
                // isAsync: true,
            }
]);

I get the following error message, even though when I check the source code of the compiled page it does contain the appropriate tourAnchor:

Can't attach to unregistered anchor with id anchor_id

I tried to make it async, but all that did was wait indefinitely, still doesn't attach to the anchor, even when it's already loaded. Is there a way to make this work?

I'm using version 9.2.1 with Angular 14 version, but I'd wager it affects all versions.

[hakimio]

Have you tried isOptional config?

[ghost]

I tried it now, but unfortunately the issue still persists.

[hakimio]

You can also try [tourAnchor]="myCondition ? 'anchor_id' : ''"

[hakimio]

And by "issue persists" I assume you still get Can't attach to unregistered anchor with id anchor_id even when you marked the step as optional? How does the full config for that step look like?

[ghost]

Thank you so much, this one worked. I tried this approach by putting something like 'dummy' instead of an empty string before, the issue in that case was that the anchorNames had to be unique but this one solved my issue, I didn't know that an empty string would make the attribute disappear but it makes sense.

[hakimio]

No problem.
isOptional should do the same, Just you can't use isOptional and isAsync together.