CODEWITHSUNDEEP
htmlangulartypescriptdialogangular-material2
Radiant
Radiant

Reputation: 390

nested Mat-dialogBox closing issue

I have one parent raster component from where I am opening my first dialog box and from that dialog box component, i am opening second dialog box. I want to pass data from last dialog box to my parent raster and meanwhile need to close all the dialog boxes but I am not able to get data from second dialog box to first dialog box and because of this, i dont get data in raster component.

Can someone help me to solve this? I have tried to do all the things but still getting undefined. Any kind of help would be nice.

Kindly find my below code.

raster.component.ts

  openDialogbox(value): void {
    this.emptyTile = value;
    const dialogRef = this.dialog.open(AddNewFlyerComponent, {
      width: '100em',
      height: '50em',
      data: {
        flyerArray: this.flyers,
        emptyPosition: this.emptyTile,
        page: this.flyers[0].Seite,
        year: this.flyers[0].Jahr,
        week: this.flyers[0].KW,
      }
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The raster dialog was closed', result);
    });
  }

AddNewFlyerComponent.ts

  openDialog(werbenumber): void {
    const dialogRef = this.dialog.open(CreateNewFlyerComponent, {
      width: '100em',
      height: '50em',
      data: {
        flyerArray: this.data.flyerArray,
        werbenumber: werbenumber,
        emptyTile: this.data.emptyPosition,
        page: this.data.page,
        week: this.data.week,
        year: this.data.year
      }
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The 1st dialog was closed', result); // getting undefined
    });
  }

CreateNewFlyerComponent.ts

  addFlyerToEmptyPosition(werbedata: WerbeData) {
    const newFlyer = {
      ArtNr: this.werbedata.ArtNr,
      Filiale: this.werbedata.FILIALE,
      Jahr: this.data.flyerArray[0].Jahr,
      KW: this.data.flyerArray[0].KW,
      Pos: this.data.emptyTile,
      Raster: this.data.flyerArray[0].Raster,
      Seite: this.data.flyerArray[0].Seite,
      WERBE_NR: this.werbedata.WERBE_NR,
      EUR_VK: this.a,
      EUR_VK_Einheit: this.b,
      VK_Einheit: this.c
    };
    this.flyerHammService.createNewFlyer(newFlyer)
      .then(
        (response: any) => {
          this.returnFlyer = response.data[0]; // This returnFlyer, I want to pass
          this.matSnackBar.open('Neuer Flyer wurde erstellt', 'Undo', {
            duration: 3000
          });
        }
      ).catch(
        error => console.log(error)
      );
  }

CreateNewFlyerComponent.ts

  <button mat-dialog-close mat-raised-button [color]="'success'" [mat-dialog-close]="returnFlyer" (click)="addFlyerToEmptyPosition(werbedata)">
    {{ 'SPEICHERN' }}
    <mat-icon>save</mat-icon>
  </button>

Upvotes: 2

Views: 1444

Answers (1)

G. Tranter
G. Tranter

Reputation: 17908

Use the same data object for both dialogs. Instead of creating a new object, update the original data object with additional data and pass it into the second dialog:

AddNewFlyerComponent.ts

openDialog(werbenumber): void {

  this.data.emptyTile = this.data.emptyPosition; // or was that a typo?
  this.data.werbenumber = werbenumber; // or use Object.defineProperty()

  const dialogRef = this.dialog.open(CreateNewFlyerComponent, {
    width: '100em',
    height: '50em',
    this.data
  });

  dialogRef.afterClosed().subscribe(result => {
    console.log('The 1st dialog was closed', result); // getting undefined
  });
}

To pass the data back to raster, use the same approach:

raster.component.ts

data;

openDialogbox(value): void {
  this.emptyTile = value;
  this.data = {
    flyerArray: this.flyers,
    emptyPosition: this.emptyTile,
    page: this.flyers[0].Seite,
    year: this.flyers[0].Jahr,
    week: this.flyers[0].KW,
  }
  const dialogRef = this.dialog.open(AddNewFlyerComponent, {
    width: '100em',
    height: '50em',
    data: this.data
  });

  dialogRef.afterClosed().subscribe(result => {
    console.log('The raster dialog was closed', result);
  });
}

Upvotes: 1

Related Questions