Is it possible to define steps across different components and reference them in a steps list in another component?

[samvloeberghs]

For example; I have some steps defined in a child component that I would like to reference in the steps list defined in its parent component. Is that possible? I can't get that to work.

Angular v20
"@ng-bootstrap/ng-bootstrap": "19.0.1",

I get Can't attach to unregistered anchor with id "environments.environmentsTopBanner" when referencing an element in the child component. I tried setTimeout before init and start to see if it's a matter of rendering and the elements not being available yet, but it doesn't work.

[hakimio]

If by define in a child component you mean adding tour anchor to child component html template, then yes, it should work. Did you copy-paste the anchor id to make sure it is the same? Maybe you need to enable isAsync step setting if the child component is added to DOM with a delay?

If you still can't make it work please create a reproduction I can take a look at.

[samvloeberghs]

I was able to narrow it down to the situation where the first element is something that gets rendered async.

See for example: https://stackblitz.com/edit/angular-wau2z8-3uwzu8dv?file=src%2Fapp%2Fui-tour-demo.component.ts

If you put back

 {
      anchorId: 'child-reference-five',
      title:
        'Title in obs async based if combined with signal after few seconds',
      content: 'This should work',
    },

as the last step, it will work again.

So it seems that the rule of thumb here is to make sure the first element is something that is like immediately available on the page.

[hakimio]

The problem in your demo is that your child component doesn't import TourNgBootstrapModule. Have you noticed the bright yellow warning in the documentation?

[samvloeberghs]

Ooh wauw, I did see that and thought I added it.
It's definitely clear enough in the documentation.

There must be something else going in our application then, because I just checked and we are doing that everywhere, but no luck..

It's good to see in the example now that even if an element gets rendered async and is used as the start element it does seem to start as soon as the element is available.

https://stackblitz.com/edit/angular-wau2z8-izum9ybk?file=src%2Fapp%2Fchild%2Fchild.component.html

Thanks a lot for your patience ;) I will figure it out from here