I'm trying to make a progress bar in angular that works fine to show the progress of a method in backEnd that processes a big Excel file.

I use an @Sse observable that emits data from the back method that I call to process the excel file.

the method works ok, and the communication between the front with the observable sse works too.

The problem is that the responses of the observable aren't being processed by the front until the metod in back finishes, because its method is called with an await.

Lets go with the code because I don't know if I am explaining it properly.

        console.time('import en back');

    const subscription = this.sseService
      .getServerSentEvent(environment.apiUrl + routesSse._pre + routesSse.getHippoImportProgress)
      .subscribe(async (a) => {
        const data = JSON.parse(a.data);
        console.log(data);
        this.currentRow = data.i;
        this.currentOperation = data.operacion;
        this.totalRows = data.total;
        this.progress = this.currentRow == 0 ? 0 : (this.currentRow / this.totalRows) * 100;
        this.cdr.detectChanges();
      });

    const importData = await this.worksSectionService.getImportExcelHippoWorksData(rowsToSend);


    console.timeEnd('import en back');

The back generates ok the values from this observable, because I have tested it with console.logs

But data are not reflected in the subscription until the back method has finished

the values from this observable are generated inside the method that is called in the back.

... I've tried to call both observable subscription converted to promise and method call in a Promise.all but the result is the same...

EDIT: if i call the method:

this.worksSectionService.getImportExcelHippoWorksData(rowsToSend)

without the await (only for testing), such like this:

        const subscription = this.sseService
      .getServerSentEvent(environment.apiUrl + routesSse._pre + routesSse.getHippoImportProgress)
      .subscribe(async (a) => {
        const data = JSON.parse(a.data);
        console.log(data);
        this.currentRow = data.i;
        this.currentOperation = data.operacion;
        this.totalRows = data.total;
        this.progress = this.currentRow == 0 ? 0 : (this.currentRow / this.totalRows) * 100;
        this.cdr.detectChanges();
      });

    this.worksSectionService.getImportExcelHippoWorksData(rowsToSend);

, the behaviour is the same