0

I'm trying to create a progressbar dialog with ngx bootstrap using its modals. I currently have the following:

generateDownload(distance: DistanceSplit) {
    this.dialogWait = this.dialogs.wait('Wait');

    list.forEach((distance, index) => {
        // ...
        this.dialogWait.setProgress(i);
        // ...
    });

    return tabledata;
}

In the DialogsService:

public wait(title: string, message: string, percentage: number, settings?: any): BsModalRef {
    // ...
    return this.modalService.show(
        DialogsComponent, 
        Object.assign({}, this.options, settings)
    );
}

The problem is that the dialog is shown only if the list.forEach loop is finished. How can show the dialog BEFORE the list is executed? Does anybody have a similar problem and some working code?

Johan Aspeling
  • 765
  • 1
  • 13
  • 38
Lars
  • 920
  • 1
  • 14
  • 34
  • How about putting the list.forEach logic inside the DialogsComponent? – huan feng Aug 20 '20 at 05:34
  • @huanfeng of course this would be possible, but I'm trying to prevent this. I'd like to keep the functionality outside of the DialogsComponent – Lars Aug 20 '20 at 05:35

1 Answers1

0

The modalService.show should be a synchronize method.

Have you debug the sequence with console.log:

generateDownload(distance: DistanceSplit) {

    this.dialogWait = this.dialogs.wait('Wait');

    //Adding breakpoint here
    console.log('generateDownload');

    list.forEach((distance, index) => {
    ...

    this.dialogWait.setProgress(i);
    ...
    });

    return tabledata;
}
huan feng
  • 7,307
  • 2
  • 32
  • 56
  • oh yes I did. The order of processing is correct, but the dialog appears too late (after the forEach has been finished) – Lars Aug 20 '20 at 05:47
  • Try to add the breakpoint in console.log, you will see the forEach hasn't been exectued and the modal is displayed. You can simply verify it on stackblitz. – huan feng Aug 20 '20 at 05:49
  • I have to correct my answer: the processing order is not correct. The forEach loop is processed and when this has finished the dialog is processed (I used the BsModalService onShown to check). But now is the question: how can I make it "in line" so that the dialog is processed at first? – Lars Aug 20 '20 at 05:54
  • The dialog should be shown before forEach, and the onInit method of DialogsComponent should be executed before the forEach. BTW, not sure if your question is setProgress always get the last value? If yes, setProgress should be an async method? – huan feng Aug 20 '20 at 06:02
  • I could not solve my problem itself. It seems that it has nothing to do with the modal dialog but with the update strategy of Angular which I not fully understand. I created a new post here, witjh a more detailed but more general description https://stackoverflow.com/questions/63502641/angular-component-doesnt-update-view-as-expected – Lars Aug 20 '20 at 09:59