MatProgressSpinner value not refreshing

Question

I have a HomeComponent and a SlidesService. The HomeComponent contains a mat-progress-spinner, which only is showed while the SlidesService is working on a save operation. What I want is to show the progress of the operation. The HomeComponent has a variable named value which is set as the value of the spinner.

<div [hidden]="!isWait">
    <mat-progress-spinner #spinner style="position:fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);"
        [value]="value"></mat-progress-spinner>
</div>

A button from the HomeComponent calls the createPPT function, which calls the callSave function. This function calls a service which is responsible for the file save.

@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit, OnDestroy {

    value = 0;

    createPPT() {
        const simpleInputDialogRef = this.matDialog.open(SimpleInputDialogComponent, {});
        
        this.isWait = true; // to show mat-progress

        simpleInputDialogRef.afterClosed().subscribe(result => {
            if (!result) {
                this.isWait = false;
                return
            }
            this.slidesService.setSlideGroups(this.slideGroups);
            this.callSave(result);
        });
    }
    
    async callSave(name) {
        this.slidesService.callbackResponse.subscribe(counter => {
            this.value = Math.floor (counter * 100 / this.slideGroups.length);
            this.cd.detectChanges (); // not doing anything
            console.log (this.value);
            console.log (this.spinner.value); // the values are printed correctly, but UI is not refreshing
        });
        
        var error = await this.slidesService.save(name);
        if (error) {
           ...
        }
        this.isWait = false;
        this.cd.detectChanges ();
    }

The service is iterating through a list. What I want to do is to callback to the HomeComponent and send the number of already processed element of the list.

@Injectable({
  providedIn: 'root'
})
export class SlidesService {

 async save(name) {
    this.pptx = new pptxgen();
    this.pptx.layout = 'LAYOUT_4x3';

    var slideGroupCounter = 0;

    for (var slideGroup of this.slideGroups) {
      slideGroupCounter++;

     this.callbackResponse.next(slideGroupCounter));

     ...

    }
}

Interestingly, if I debug the whole process, the callback is working, the value variable is updated correctly, and the UI is refreshing! But if I not break into the callback function, the console.log-s are correct, but the UI is NOT refreshing!

Do you have any ideas?