Step overlay

[d4nielix]

Hi! Is there any possibility to add overlay to steps like in other guided tours for angular?

[GobindaSaha]

You can put a backdrop manually but it requires lot of codes. @d4nielix

[d4nielix]

Yes, sadly it needs a fork of library to be done properly.

[dandy-andy]

I did this and it was pretty easy. I used bdc-walkthrough v19.0.0 (and Angular v21).

Basic idea:

1. Set a background on the overlay that is already used.
2. Bind a class to the target element which increases its z-index above the overlay.
3. The class is set when the relevant popup is displaying. I used the changesDisplaying event a a signal, but you could also just use a function and call _bdcService.getIsDisplaying(id) (if you don't mind bound functions in templates).
   Note: I only have one popup displaying at a time.

Target element: if guidePopupDisplaying() returns this popup id, then set the class to push this element above the overlay z-index.

<app-map 
        [bdcWalkTriggerFor]="mapPopup" 
        [ngClass]="{guidePopupTarget: guidePopupDisplaying() === mapPopup.name}">
</app-map>

guidePopupDisplaying signal: subscribe to the changesDisplaying event and set the current displayed popup id.

guidePopupDisplaying = signal<string | undefined>(undefined);

constructor() {
    this._bdcWalkthroughService.changesDisplaying.subscribe(event => {
         this.guidePopupDisplaying.set(event.action === BdcDisplayEventAction.VisibilityChanged && event.visible
            ? event.id 
            : undefined);
     });
}

Bdc popup component: nothing special here other than I used the class to set the overlay colour.

<bdc-walk-popup #sightingPopup name="mapPopup" 
        header="Map" [mustCompleted]="{showGuide: true}" 
        [onButtonCompleteTask]="{guideStep: 2}" buttonText="Next" 
        class="guide-popup">
    Text
</bdc-walk-popup>

Global styles: Set the overlay colour if it contains a bdc popup, and push the current popup target above the z-index (which is 1000 for the cdk overlay).

.cdk-overlay-container:has(.guide-popup) {
    background: rgba(0,0,0,.5);
}
.guidePopupTarget {
    z-index: 1001;
}