Found the answer by myself: just created a property on the class called componentInstance and substituted const component with this.componentInstance, then created a function on the service updateMessage:public updateMessage(updatedMessage) {
(this.componentInstance.instance as any).message = updatedMessage;
}

Hi Steven,

I added your extra lines and passed a message as a parameter in the show() function, but I would like to update the message with a % of the tasks being completed, do you have any tips?
Here is a simplyfied version of my code:

ngOnInit() {
this.spinnerOverlayService.show("0%");
const result$ = this.contentService.getContent(['articles', 'pages', 'users']);
result$.pipe(
mergeMap(([finalResult, progress]) => merge(
progress.pipe(
tap((value) => console.log(`${value}% completed`)), //here my service gives me the % of completion of my http calls, now I would like to update the spinner message with this value
),
finalResult
)),
).subscribe(
(res) => {
this.content = res;
this.spinnerOverlayService.hide();
},
(err) => {
console.log('err: ', err);
this.spinnerOverlayService.hide();
}
);
}


Angular beginner here.
I also struggle finding the point where the overlay is shown and hidden in your code. I tried to put overlayService.show() and hide() in the right spots in my code but all I get is either a “Maximum call stack exceeded and the highlighted line is in the SpinnerOverlayComponent.html or a “Host already has a portal attached” error. What did I miss in your code?

In the SpinnerOverlayService, add an extra line:

const component = this.overlayRef.attach(spinnerOverlayPortal);
(component.instance as any).message = message;