Use MatDialog to open the next dialog when the previous one has been closed - whether you choose to use a

Question

Use MatDialog to open the next dialog when the previous one has been closed - whether you choose to use a

I'm trying to figure out how to open the next dialog from a stream only after the previous one has been closed. I want to make sure that I don't open all the dialogs in a row as soon as I get the values from the stream.

        const arraySource = from(res);

        arraySource.pipe().subscribe(code => {
          console.log('value: ', code);

          const description = this.locale.getDescription(code);
          const config      = new MatDialogConfig();
                config.data = {code: code, description: description.value};

          this.validationDialogRef = this.dialog.open(ValidationDialog, config);
          this.validationDialogRef.afterClosed().subscribe(data => {
                console.log("data returned from mat-dialog-close is ", this.validationDialogRef, data);

          });

        })

Using the take(1) operator, I am only able to get the first element from the array in the dialog. Without using take(1), all the dialogs will pop up at once. Is there a way to trigger the scheduler only when the previous dialog has been closed?

Best regards,

angular typescript angular-material dialog

Answer 1

Answer №1

A helpful method to use in this scenario is the concat function. It ensures that the next observable is triggered only after the previous one has completed:

concat(
  ...res.map((code) => of(void 0).pipe(
    concatMap(() => {
      const description = this.locale.getDescription(code);
      const config = new MatDialogConfig();
      config.data = {code: code, description: description.value};

      this.validationDialogRef = this.dialog.open(ValidationDialog, config);

      return this.validationDialogRef.afterClosed().pipe(
        tap((data) => {
          console.log("data from mat-dialog-close:", this.validationDialogRef, data);
        })
      );
    })
  ))
).susbcribe(() => {
  // all dialogs have been processed
});

If you prefer using concatAll, the implementation would be similar. You can achieve the same result, and it can also be combined with defer:

from(res).pipe(
  map((code) => defer(() => {
    const description = this.locale.getDescription(code);
    const config = new MatDialogConfig();
    config.data = {code: code, description: description.value};

    this.validationDialogRef = this.dialog.open(ValidationDialog, config);

    return this.validationDialogRef.afterClosed().pipe(
      tap((data) => {
        console.log("data from mat-dialog-close:", this.validationDialogRef, data);
      })
    );
  }),
  concatAll()
).subscribe(() => {
  // all dialogs have been processed
});

Answer 2

A helpful method to use in this scenario is the concat function. It ensures that the next observable is triggered only after the previous one has completed:

concat(
  ...res.map((code) => of(void 0).pipe(
    concatMap(() => {
      const description = this.locale.getDescription(code);
      const config = new MatDialogConfig();
      config.data = {code: code, description: description.value};

      this.validationDialogRef = this.dialog.open(ValidationDialog, config);

      return this.validationDialogRef.afterClosed().pipe(
        tap((data) => {
          console.log("data from mat-dialog-close:", this.validationDialogRef, data);
        })
      );
    })
  ))
).susbcribe(() => {
  // all dialogs have been processed
});

If you prefer using concatAll, the implementation would be similar. You can achieve the same result, and it can also be combined with defer:

from(res).pipe(
  map((code) => defer(() => {
    const description = this.locale.getDescription(code);
    const config = new MatDialogConfig();
    config.data = {code: code, description: description.value};

    this.validationDialogRef = this.dialog.open(ValidationDialog, config);

    return this.validationDialogRef.afterClosed().pipe(
      tap((data) => {
        console.log("data from mat-dialog-close:", this.validationDialogRef, data);
      })
    );
  }),
  concatAll()
).subscribe(() => {
  // all dialogs have been processed
});

Use MatDialog to open the next dialog when the previous one has been closed - whether you choose to use a

Answer №1

Similar questions

Troubleshooting: Android compatibility issue with Angular Capacitor iframe

String validation using regular expressions

What is the process for obtaining or creating scripts in the package.json file for Angular?

Transformed Vue code with TypeScript using a more aesthetically pleasing format, incorporating ref<number>(0)

Use Filterpipe within Angular Template to sort content based on Object Value

Changing the Background Color of MUI Dialogs

What is the step-by-step process for incorporating the `module` module into a Vue project?

Using JavaScript to display a confirmation dialog box with the content retrieved from a text input field

Is there a way to reverse the animation playback in Angular?

Resolving the issue of 'type' property missing but required in 'SeriesXrangeOptions' within the Angular Highcharts module

Error in Angular 6: Unable to access the property 'runOutsideAngular' as it is undefined

The specified file cannot be located by ASP.NET Core

Retrieving the text value of a selected option with a reactive form

During the signin process with invalid credentials, a CallbackRouteError is thrown by Next-auth instead of the expected CredentialsSignin error while using the Credentials

Angular Material table that uses a right-to-left direction for layout

Notify programmers about the potential risks associated with utilizing certain third-party components

Utilizing ngrx/store in Angular 2 for Search Functionality

tips for concealing the shadow of a draggable div during the dragging process

The issue arises when attempting to apply a class binding to the mat-card element, as the mat-card class

A comprehensive guide on displaying data in Angular using an API