CODEWITHSUNDEEP
angularmaterial-ui
Reino Wis
Reino Wis

Reputation: 103

Angular What is the best practice to open another dialog after closing another one?

Currently i got some feedbacks that I should not do this as my colleagues said that was a nested subscription, and should avoid using this. Just wanna open a simple message dialog after closing the first one and when the first one returns a true value. Is there any way better than this one?

weatherProtectDialog.afterClosed()
    .subscribe((result) => {
      if (result) {
        this.dialog.open(SimpleDialogComponent, {
          data: {
            title: 'title',
            message: 'message',
          },
        });
      }
    });

Upvotes: 2

Views: 196

Answers (1)

Osakr
Osakr

Reputation: 1066

Use RxJS operators to avoid nested subscriptions.

weatherProtectDialog.afterClosed()
.pipe(
    filter(res => res),
    tap(() => this.dialog.open(SimpleDialogComponent, {
        data: {
          title: 'title',
          message: 'message',
        },
    }))
).subscribe()

Filter operator: https://rxjs.dev/api/operators/filter

Tap operator: https://rxjs.dev/api/operators/tap

Another solution could be to transform this observable into a promise and work with async/await to avoid nesting, however since you are using Angular I recommend you to use RxJS

Upvotes: 2

Related Questions