How to pass data to afterClosed() in Angular Material Dialog in Angular 6

Question

I am trying to pass data from a Dialog back to the component from which the user opened the dialog from. My simple example is below:

test.component.ts

import { xDialogComponent } from './../x-dialog/x-dialog.component';
import { xFilter } from './x-filter';
import { xLevelResult, xmodelResult, xpayResult, xpayClassResult, xSpResult } from './../database.service';
import { Component, OnInit } from '@angular/core';
import { FormArray, FormControl, FormGroup, Validators } from '@angular/forms';
import { databaseService, xSigResult, xOutResult, CurxpayResult } from '../database.service';
import { HttpClient } from '@angular/common/http';
import { NgIf } from '@angular/common/src/directives/ng_if';
import { element } from 'protractor';
import { ActivatedRoute } from '@angular/router';
import { MakeGroup, xpayteamResult, xpayteamSPResult, NoticeResult } from '../database.service';
import { DateResult } from '../database.service';
import { DatePipe } from '@angular/common';
import { Router } from '@angular/router';
import {MatSortModule} from '@angular/material/sort';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatButtonModule, MatCheckboxModule} from '@angular/material';
import {MatTabsModule} from '@angular/material/tabs';
import {Observable, forkJoin} from 'rxjs';
import {mergeMap, expand, map, flatMap, concat, switchMap, combineAll} from 'rxjs/operators';
import {MatGridListModule} from '@angular/material/grid-list';
import {MatFormFieldModule} from '@angular/material/form-field';
import { MatInputModule, MatTableModule, MatPaginatorModule } from '@angular/material';
import { FormsModule } from '@angular/forms';
import {MatSnackBar} from '@angular/material';
import { MakeService } from './../../Make.service';
import {MatDialogModule} from '@angular/material/dialog';
import {MatDialogRef, MAT_DIALOG_DATA, MatDialog} from '@angular/material/dialog';



@Component({
  selector: 'app-x',
  templateUrl: './x.component.html',
  styleUrls: ['../style.css']
})
export class xComponent implements OnInit {

  MakeGroups: MakeGroup[];
  xLevelresults: Array<xLevelResult>;
  xmodelresults: Array<xmodelResult>;
  xsigresults: Array<xSigResult>;
  curxpayresults: Array<CurxpayResult>;
  xpayresults: Array<xpayResult>;
  xpayclassresults: Array<xpayClassResult>;
  xpayteamresults: Array<xpayteamResult>;
  xpayteamspresults: Array<xpayteamSPResult>;
  FinalArray: any[] = [];
  x_sp_results: Array<xSpResult>;
  noticeresults: Array<NoticeResult>;
  modelName: string;
  TransactionDate: string;
  MakeName: string;
  delete: string;
  dateselect: string;
  noticedays: number;
  selectedEffect: number;


  // Disablers
  SubmitDisabled: boolean;
  AmountDisabled: boolean;
  DateDisabled: boolean;
  ISDisabled: boolean;
  modelDisabled: boolean;
  SigDisabled: boolean;
  editswitch: boolean;
  nextswitch: boolean;


  // Selection variables for SP Call
  selectedLevel: number;
  selectedAmount: number;
  selectedmodelNbr: number;
  selectedClassId: number;
  Advteam_DRAW_REPAY: number;
  selectedSigId: number;

  // SP Call
  xspcall: string;

  // Date variables
  date: Date;
  selectedDate = '';
  success: boolean;
  tomorrow: number;
  yformat = '';


  // x Outstanding
  xoutresults: Array<xOutResult>;
  x: number;

  constructor(
    private databaseService: databaseService,
    private route: ActivatedRoute,
    private router: Router,
    private MakeService: MakeService,
    public dialogx: MatDialog,

    public snackBar: MatSnackBar
  ) {}


// changes the actual value of the variable for selectedLevel based on user selection
changedLevel (xLevelresult: xLevelResult) {
  // Disable to ensure user enters correct data
  this.SubmitDisabled = true;
  this.DateDisabled = true;
  this.SigDisabled = true;
  this.xpayresults = [];
  this.xsigresults = [];
  this.selectedDate = undefined;
  this.selectedSigId = undefined;
  this.xpayclassresults = [];
  this.xpayteamresults = [];
  this.xpayteamspresults = [];
  this.curxpayresults = [];
  this.FinalArray =  [];
  this.selectedAmount = undefined;
  this.selectedLevel = (xLevelresult ? xLevelresult.Make_Level_Id : 1);
  console.log(this.selectedLevel);
// Populate model Drop-Down
const id = this.route.snapshot.paramMap.get('id');
this.databaseService.getxmodel(id, this.selectedLevel)
  .subscribe(xmodelresults => this.xmodelresults = xmodelresults);
}

// changes the actual value of the variable for selectedmodelNbr based on user selection
changedmodel (xmodelresult: xmodelResult) {
  this.SubmitDisabled = true;
  this.DateDisabled = true;
  this.SigDisabled = true;
  this.selectedDate = undefined;
  this.xpayresults = [];
  this.xsigresults = [];
  this.selectedSigId = undefined;
  this.xpayclassresults = [];
  this.xpayteamresults = [];
  this.xpayteamspresults = [];
  this.curxpayresults = [];
  this.FinalArray =  [];
  this.selectedAmount = undefined;
  this.selectedmodelNbr = (xmodelresult ? xmodelresult.model_Nbr : 1 );

  console.log(this.selectedmodelNbr);
}



// // changes the actual value of the variable for selectedAmount based on user selection
changedAmount (event: any) {

  if (this.editswitch === true) {
    this.SubmitDisabled = true;
    this.DateDisabled = true;
    this.selectedAmount = event.target.value;
    this.xpayresults = [];
    this.xpayclassresults = [];
    this.xpayteamresults = [];
    this.xpayteamspresults = [];
    this.curxpayresults = [];
    this.FinalArray =  [];
    const id = this.route.snapshot.paramMap.get('id');
    // change all values
    this.selectedDate = this.xoutresults[this.x].Calc_Dt;
    this.selectedLevel = this.xoutresults[this.x].Make_Level_Id;
    this.selectedmodelNbr = this.xoutresults[this.x].model_Nbr;
    // Populate form Data
    this.databaseService.getxLevel(id)
    .subscribe(xLevelresults => this.xLevelresults = xLevelresults);
    this.databaseService.getxmodel(id, this.selectedLevel)
    .subscribe(xmodelresults => this.xmodelresults = xmodelresults);
    this.databaseService.getxSig(id, this.selectedLevel, this.selectedDate)
    .subscribe(xsigresults => this.xsigresults = xsigresults);
    // Set Vals
    this.modelName = this.xoutresults[this.x].model_Name;
    this.TransactionDate = this.xoutresults[this.x].Calc_Dt;
    this.MakeName = this.xoutresults[this.x].Make_Level_Name;


    // Populate the outstanding x Requests effecting the current request
    this.databaseService.getCurxpay(id, this.selectedmodelNbr, this.selectedLevel, this.selectedDate)
    .subscribe(curxpayresults => this.curxpayresults = curxpayresults,
      error => console.log('ERROR!'),
      () => {
      // Set the effect on Outs Prin
      if (this.curxpayresults.length === 0) {
        this.selectedEffect = 0;
      } else {
      this.selectedEffect = this.curxpayresults[0].Outstanding_Total;
      }
      // Populate model Level Data
  this.databaseService.getxpay(id, this.selectedLevel, this.selectedmodelNbr, this.selectedAmount, this.selectedEffect )
      .subscribe(xpayresults => this.xpayresults = xpayresults,
        error => console.log('ERROR!'),
        // Check that Max CMT can cover the request
        () => {    console.log(this.xpayresults[0].reaminder);
          if (this.xpayresults[0].reaminder < 0 || this.xpayresults[0].total < 0) {
            // snack
            if (this.xpayresults[0].reaminder < 0) {
              this.snackBar.open('You:: ' +
               (this.xpayresults[0].reaminder * -1).toFixed(2), 'Close', { duration: 10000} );
            } else {
              this.snackBar.open('You: ' +
               (this.xpayresults[0].total * -1).toFixed(2), 'Close', { duration: 10000} );
            }
            } else {
    // Populate Class and team Level Data for Screen
    this.databaseService.getxpayClass(id, this.selectedLevel, this.selectedmodelNbr, this.selectedAmount, this.selectedEffect)
    .subscribe(
        (xpayclassresults) => {
            this.xpayclassresults = xpayclassresults;
            for (const xpayclassresult of this.xpayclassresults) {
                this.selectedClassId = xpayclassresult.Class_ID;
                console.log(this.selectedClassId);
                this.databaseService.getxpayteam(id, this.selectedLevel, this.selectedmodelNbr
                  , this.selectedAmount, this.selectedClassId, this.selectedEffect )
                    .subscribe((xpayteamresults) => {
                        this.xpayteamresults = xpayteamresults;
                        this.FinalArray.push(this.xpayteamresults);
                    }, error => console.log('ERROR!'),
                    () => {
                      this.DateDisabled = false;
                      this.SubmitDisabled = false;
                    });
            }
        });

    // Get team Level Data for SP submissions
    this.databaseService.getxpayteamSP(id, this.selectedLevel, this.selectedmodelNbr
      , this.selectedAmount)
    .subscribe(xpayteamspresults => this.xpayteamspresults = xpayteamspresults,
      error => console.log('ERROR!'),
       () => {
       });
            }
        });
      });
  }  if (this.nextswitch === true) {
    this.SubmitDisabled = true;
    this.DateDisabled = true;
    this.selectedAmount = event.target.value;
    this.xpayresults = [];
    this.xpayclassresults = [];
    this.xpayteamresults = [];
    this.xpayteamspresults = [];
    this.curxpayresults = [];
    this.FinalArray =  [];
    const id = this.route.snapshot.paramMap.get('id');

    // Populate the outstanding x Requests effecting the current request
    this.databaseService.getCurxpay(id, this.selectedmodelNbr, this.selectedLevel, this.selectedDate)
    .subscribe(curxpayresults => this.curxpayresults = curxpayresults,
      error => console.log('ERROR!'),
      () => {
      // Set the effect on Outs Prin
      if (this.curxpayresults.length === 0) {
        this.selectedEffect = 0;
      } else {
      this.selectedEffect = this.curxpayresults[0].Outstanding_Total;
      }
      // Populate model Level Data
  this.databaseService.getxpay(id, this.selectedLevel, this.selectedmodelNbr, this.selectedAmount, this.selectedEffect )
      .subscribe(xpayresults => this.xpayresults = xpayresults,
        error => console.log('ERROR!'),
        // Check that Max CMT can cover the request
        () => {    console.log(this.xpayresults[0].reaminder);
          if (this.xpayresults[0].reaminder < 0 || this.xpayresults[0].total < 0) {
            // snack
            if (this.xpayresults[0].reaminder < 0) {
              this.snackBar.open('You:: ' +
               (this.xpayresults[0].reaminder * -1).toFixed(2), 'Close', { duration: 10000} );
            } else {
              this.snackBar.open('You: ' +
               (this.xpayresults[0].total * -1).toFixed(2), 'Close', { duration: 10000} );
            }
            } else {
    // Populate Class and team Level Data for Screen
    this.databaseService.getxpayClass(id, this.selectedLevel, this.selectedmodelNbr, this.selectedAmount, this.selectedEffect)
    .subscribe(
        (xpayclassresults) => {
            this.xpayclassresults = xpayclassresults;
            for (const xpayclassresult of this.xpayclassresults) {
                this.selectedClassId = xpayclassresult.Class_ID;
                console.log(this.selectedClassId);
                this.databaseService.getxpayteam(id, this.selectedLevel, this.selectedmodelNbr
                  , this.selectedAmount, this.selectedClassId, this.selectedEffect )
                    .subscribe((xpayteamresults) => {
                        this.xpayteamresults = xpayteamresults;
                        this.FinalArray.push(this.xpayteamresults);
                    }, error => console.log('ERROR!'),
                    () => {
                      this.DateDisabled = false;
                      this.SubmitDisabled = false;
                    });
            }
        });

    // Get team Level Data for SP submissions
    this.databaseService.getxpayteamSP(id, this.selectedLevel, this.selectedmodelNbr
      , this.selectedAmount)
    .subscribe(xpayteamspresults => this.xpayteamspresults = xpayteamspresults,
      error => console.log('ERROR!'),
       () => {
       });
            }
        });
      });
  } else {
  this.xsigresults = [];
  this.selectedSigId = undefined;
  this.SubmitDisabled = true;
  this.DateDisabled = true;
  this.SigDisabled = false;
  this.xpayresults = [];
  this.xpayclassresults = [];
  this.xpayteamresults = [];
  this.xpayteamspresults = [];
  this.curxpayresults = [];
  this.FinalArray =  [];
  const id = this.route.snapshot.paramMap.get('id');
  // Populate Signatory Drop-Down
  this.databaseService.getxSig(id, this.selectedLevel, this.selectedDate)
    .subscribe(xsigresults => this.xsigresults = xsigresults);
  // change amount value
  this.selectedAmount = event.target.value;
  console.log(this.selectedAmount);
  }
    // Populate Values for Notice Days Drop-Down
    const id = this.route.snapshot.paramMap.get('id');
this.databaseService.getNotice(id)
.subscribe(noticeresults => this.noticeresults = noticeresults,
  error => console.log('ERROR!'),
   () => {
     if (this.selectedAmount > 0) {
      this.noticedays = this.noticeresults[0].Min_Repay_Notice_Days;
      console.log(this.noticedays);
     } else {
      this.noticedays = this.noticeresults[0].Min_Adv_Notice_Days;
     }
   });
}

// // changes the actual value of the variable for selectedSigId based on user selection
changedSig (xsigresult: xSigResult) {
  this.SubmitDisabled = true;
  this.DateDisabled = false;
  this.selectedDate = undefined;
  this.xpayresults = [];
  this.xpayclassresults = [];
  this.xpayteamresults = [];
  this.xpayteamspresults = [];
  this.curxpayresults = [];
  this.FinalArray =  [];
  this.selectedSigId = (xsigresult ? xsigresult.Signatory_ID : 1 );
  console.log(this.selectedSigId);
}

  // changes the actual value of the variable for selectedDate based on user selection of the date and pulls corresponding data
  changedDate (event: any) {
    // Disable to ensure user enters correct data
    this.DateDisabled = true;
    this.SubmitDisabled = true;
    // change date value
    this.selectedDate = event.target.value;
    console.log(this.selectedDate);
    this.xpayresults = [];
    this.xpayclassresults = [];
    this.xpayteamresults = [];
    this.xpayteamspresults = [];
    this.curxpayresults = [];
    this.FinalArray =  [];
    const id = this.route.snapshot.paramMap.get('id');
    // Populate the outstanding x Requests effecting the current request
    this.databaseService.getCurxpay(id, this.selectedmodelNbr, this.selectedLevel, this.selectedDate)
  .subscribe(curxpayresults => this.curxpayresults = curxpayresults,
    error => console.log('ERROR!'),
    () => {
      // Set the effect on Outs Prin
      if (this.curxpayresults.length === 0) {
        this.selectedEffect = 0;
      } else {
      this.selectedEffect = this.curxpayresults[0].Outstanding_Total;
      }
      // Populate model Level Data
  this.databaseService.getxpay(id, this.selectedLevel, this.selectedmodelNbr, this.selectedAmount, this.selectedEffect )
  .subscribe(xpayresults => this.xpayresults = xpayresults,
    error => console.log('ERROR!'),
    // Check that Max CMT can cover the request
    () => {    console.log(this.xpayresults[0].reaminder);
      if (this.xpayresults[0].reaminder < 0 || this.xpayresults[0].total < 0) {
        // snack
        if (this.xpayresults[0].reaminder < 0) {
          this.snackBar.open('You:: ' +
           (this.xpayresults[0].reaminder * -1).toFixed(2), 'Close', { duration: 10000} );
        } else {
          this.snackBar.open('Yo: ' +
           (this.xpayresults[0].total * -1).toFixed(2), 'Close', { duration: 10000} );
        }
        } else {
// Populate Class and team Level Data for Screen
this.databaseService.getxpayClass(id, this.selectedLevel, this.selectedmodelNbr, this.selectedAmount, this.selectedEffect)
.subscribe(
    (xpayclassresults) => {
        this.xpayclassresults = xpayclassresults;
        for (const xpayclassresult of this.xpayclassresults) {
            this.selectedClassId = xpayclassresult.Class_ID;
            console.log(this.selectedClassId);
            this.databaseService.getxpayteam(id, this.selectedLevel, this.selectedmodelNbr
              , this.selectedAmount, this.selectedClassId, this.selectedEffect )
                .subscribe((xpayteamresults) => {
                    this.xpayteamresults = xpayteamresults;
                    this.FinalArray.push(this.xpayteamresults);
                }, error => console.log('ERROR!'),
                () => {
                  this.DateDisabled = false;
                  this.SubmitDisabled = false;
                });
        }
    });

// Get team Level Data for SP submissions
this.databaseService.getxpayteamSP(id, this.selectedLevel, this.selectedmodelNbr
  , this.selectedAmount)
.subscribe(xpayteamspresults => this.xpayteamspresults = xpayteamspresults,
  error => console.log('ERROR!'),
   () => {
   });
        }
    });
  });
  }

submit() {
  this.DateDisabled = true;
  this.ISDisabled = true;
  this.modelDisabled = true;
  this.SubmitDisabled = true;
  this.AmountDisabled = true;
  this.SigDisabled = true;
  if (this.selectedAmount > 0) {
  for (const xpayteamspresult of this.xpayteamspresults) {
    this.Advteam_DRAW_REPAY = (xpayteamspresult.team_DRAW_REPAY * -1);
    this.xspcall = ('\'' + this.selectedDate + '\',' +
      xpayteamspresult.Make_Level_Debt_ID + ',' + xpayteamspresult.Make_Id +
       ',' + xpayteamspresult.Make_Level_Id + ',' + xpayteamspresult.Class_ID + ',' +
       xpayteamspresult.Debt_ID + ',' + xpayteamspresult.team_ID + ',' +
       xpayteamspresult.team_DRAW_REPAY + ',' + '0' + ',' + this.Advteam_DRAW_REPAY);
       this.databaseService.getxSP(this.xspcall).subscribe(x_sp_results => this.x_sp_results = x_sp_results);
    }
  } else {
    for (const xpayteamspresult of this.xpayteamspresults) {
      this.xspcall = ('\'' + this.selectedDate + '\',' +
        xpayteamspresult.Make_Level_Debt_ID + ',' + xpayteamspresult.Make_Id +
         ',' + xpayteamspresult.Make_Level_Id + ',' + xpayteamspresult.Class_ID + ',' +
         xpayteamspresult.Debt_ID + ',' + xpayteamspresult.team_ID + ',' +
         '0' + ',' + xpayteamspresult.team_DRAW_REPAY + ',' + xpayteamspresult.team_DRAW_REPAY);
         this.databaseService.getxSP(this.xspcall).subscribe(x_sp_results => this.x_sp_results = x_sp_results);
  }
  }
  const id = this.route.snapshot.paramMap.get('id');
  this.router.navigate(['/dashboard', id]);
}

submitEditDel (val) {
  this.dateselect = '';
  this.delete = 'To DELETE an existing entry mark this 0 and submit.';
  this.DateDisabled = true;
  this.ISDisabled = true;
  this.modelDisabled = true;
  this.SubmitDisabled = true;
  this.AmountDisabled = false;
  this.SigDisabled = true;
  this.x = val;
  this.editswitch = true;
  console.log(this.x);
  this.xpayresults = [];
  this.xpayclassresults = [];
  this.xpayteamresults = [];
  this.xpayteamspresults = [];
  this.curxpayresults = [];
  this.FinalArray =  [];
  const id = this.route.snapshot.paramMap.get('id');
  // change all values
  this.selectedDate = this.xoutresults[this.x].Calc_Dt;
  this.selectedAmount = this.xoutresults[this.x].Advance;
  this.selectedLevel = this.xoutresults[this.x].Make_Level_Id;
  this.selectedmodelNbr = this.xoutresults[this.x].model_Nbr;
  // Set Vals
  this.modelName = this.xoutresults[this.x].model_Name;
  this.TransactionDate = this.xoutresults[this.x].Calc_Dt;
  this.MakeName = this.xoutresults[this.x].Make_Level_Name;


      // Populate the outstanding x Requests effecting the current request
      this.databaseService.getCurxpay(id, this.selectedmodelNbr, this.selectedLevel, this.selectedDate)
      .subscribe(curxpayresults => this.curxpayresults = curxpayresults,
        error => console.log('ERROR!'),
        () => {
      // Set the effect on Outs Prin
      if (this.curxpayresults.length === 0) {
        this.selectedEffect = 0;
      } else {
      this.selectedEffect = this.curxpayresults[0].Outstanding_Total;
      }
      // Populate model Level Data
  this.databaseService.getxpay(id, this.selectedLevel, this.selectedmodelNbr, this.selectedAmount, this.selectedEffect )
      .subscribe(xpayresults => this.xpayresults = xpayresults,
        error => console.log('ERROR!'),
        // Check that Max CMT can cover the request
        () => {    console.log(this.xpayresults[0].reaminder);
          if (this.xpayresults[0].reaminder < 0 || this.xpayresults[0].total < 0) {
            // snack
            if (this.xpayresults[0].reaminder < 0) {
              this.snackBar.open('You:: ' +
               (this.xpayresults[0].reaminder * -1).toFixed(2), 'Close', { duration: 10000} );
            } else {
              this.snackBar.open('You:y: ' +
               (this.xpayresults[0].total * -1).toFixed(2), 'Close', { duration: 10000} );
            }
            } else {
// Populate Class and team Level Data for Screen
this.databaseService.getxpayClass(id, this.selectedLevel, this.selectedmodelNbr, this.selectedAmount, this.selectedEffect)
.subscribe(
    (xpayclassresults) => {
        this.xpayclassresults = xpayclassresults;
        for (const xpayclassresult of this.xpayclassresults) {
            this.selectedClassId = xpayclassresult.Class_ID;
            console.log(this.selectedClassId);
            this.databaseService.getxpayteam(id, this.selectedLevel, this.selectedmodelNbr
              , this.selectedAmount, this.selectedClassId, this.selectedEffect)
                .subscribe((xpayteamresults) => {
                    this.xpayteamresults = xpayteamresults;
                    this.FinalArray.push(this.xpayteamresults);
                }, error => console.log('ERROR!'),
                () => {
                  this.AmountDisabled = false;
                  this.SubmitDisabled = false;
                });
        }
    });
// Get team Level Data for SP submissions
this.databaseService.getxpayteamSP(id, this.selectedLevel, this.selectedmodelNbr
  , this.selectedAmount)
.subscribe(xpayteamspresults => this.xpayteamspresults = xpayteamspresults,
  error => console.log('ERROR!'),
   () => {
   });
  }
});
        });
}


openDialog(): void {
  const id = this.route.snapshot.paramMap.get('id');
  const dialogRef = this.dialogx.open(xDialogComponent, {
    width: '880px'    });
    dialogRef.componentInstance.id = id;
    dialogRef.componentInstance.Levelid = this.selectedLevel;
    dialogRef.componentInstance.modelnbr = this.selectedmodelNbr;
    dialogRef.componentInstance.selectedDate = this.selectedDate;

  dialogRef.afterClosed().subscribe(result => {
    console.log('The dialog was closed');
    console.log(dialogRef.componentInstance.closeMessage);
// Clear All Arrays
this.selectedAmount = undefined;
this.nextswitch = true;
this.DateDisabled = true;
this.ISDisabled = true;
this.modelDisabled = true;
this.SubmitDisabled = true;
this.AmountDisabled = false;
this.SigDisabled = true;
this.xpayresults = [];
this.xpayclassresults = [];
this.xpayteamresults = [];
this.xpayteamspresults = [];
this.curxpayresults = [];
this.FinalArray =  [];
const id = this.route.snapshot.paramMap.get('id');
this.selectedmodelNbr = 2;
// No need to change values as all will remain same except amount

  });
}


  ngOnInit() {
    this.MakeService.changeUrlid(this.route.snapshot.paramMap.get('id'));
  // returns the outstanding x Draw/Repay
   const id = this.route.snapshot.paramMap.get('id');
  this.databaseService.getxOut(id).subscribe(xoutresults => this.xoutresults = xoutresults);
  // get the Make Level data
  this.databaseService.getxLevel(id)
  .subscribe(xLevelresults => this.xLevelresults = xLevelresults);
  // Disable to ensure user enters correct data
  this.SubmitDisabled = true;
  this.DateDisabled = true;
  this.SigDisabled = true;
  // get data for the dynamically chose Make group
    this.databaseService.getGroup(id)
      .subscribe(MakeGroups => this.MakeGroups = MakeGroups);
    // get today's and tomorrows's date
    this.date = new Date();
    this.tomorrow = (Date.now() + 86400000 );
    // format tomorrow's date for the initial run (using tomorrow as this is in the Borrowing Base)
    const d = new Date(this.tomorrow);
    let ym = '' + (d.getMonth() + 1);
    let yd = '' + d.getDate();
    const yy = d.getFullYear();
      if (ym.length < 2) {
        ym = '0' + ym;
      }
      if (yd.length < 2) {
        yd = '0' + yd;
      }
      const yformat = [yy, ym, yd].join('-');
  }

}

test-dialog.component.ts

import { AppRoutingModule } from './../../app-routing.module';
import { Component, OnInit } from '@angular/core';
import {MatDialogModule} from '@angular/material/dialog';
import {MatDialogRef, MAT_DIALOG_DATA, MatDialog} from '@angular/material/dialog';
import { Inject } from '@angular/core';
import { Observable } from 'rxjs';
import { databaseService, NextxResult } from '../database.service';
import { TrackerResult } from '../database.service';
import { HttpClient } from '@angular/common/http';
import { element } from 'protractor';
import { ActivatedRoute, Router, RouterLink, Routes  } from '@angular/router';


@Component({
  selector: 'app-x-dialog',
  templateUrl: './x-dialog.component.html',
  styleUrls: ['../style.css']
})
export class xDialogComponent implements OnInit {

  id: string;

  nextxresults: Array<NextxResult>;
  closeMessage: string;

  constructor(
    private databaseService: databaseService,
    private route: ActivatedRoute,
    private router: Router,
    public dialogRef: MatDialogRef<xDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any) { }

    onClose(): void {
      // set the closeMessage property here
    this.closeMessage = 'Pizza!';
    this.dialogRef.close(5);
    }
    screenClick(val) {
console.log(val);
    }

  ngOnInit() {

  this.databaseService.getNextx(this.id)
  .subscribe(nextxresults => this.nextxresults = nextxresults);
  }

}

The console.log comes back as undefined, any idea why I am not getting "Pizza!"?

Updated with all the code for both files to hopefully add more insight into my issue. Really appreciate any help to get this sorted out!

Answer 1

This is a possible workaround, but not the correct solution. Your code should be working as-is (according to the documentation) so there is something else going on that is causing it to break. Without a lot more context into your code, it will be hard to determine exactly what the issue is. For now, you can try this:

test-dialog.component.ts

export class TestDialogComponent implements OnInit {

  id: string;
  nextresults: Array<NextResult>;
  closeMessage: string = "";      

  constructor(
    ...
    public dialogRef: MatDialogRef<TestDialogComponent>, 
    ...) { }

  onClose(): void {
    // set the closeMessage property here
    this.closeMessage = "Pizza!";
    this.dialogRef.close('ref');
  }
  ...
}

test.component.ts

openDialog() {
  const id = this.route.snapshot.paramMap.get('id');
  const dialogRef = this.dialog.open(TestDialogComponent, {
    width: '880px'    });
    dialogRef.componentInstance.id = id;

  dialogRef.afterClosed().subscribe(result => {
    console.log('The dialog was closed');
    // reference the closeMessage property here
    console.log(dialogRef.componentInstance.closeMessage);
  });
}

Answer 2

1. Component A calls the dialog open event
2. User type some values in the dialog component (Component B) and click on Save
3. Component B calls the this.dialogRef.close(this.worksheetName.value) with the desired return values
4. this.dialogRef.afterClosed().subscribe getting invoked with the value passed

Component A

addWorksheet(): void {
    this.dialogRef = this.dialog.open(CreateWorksheetComponent, { width: '400px' });
    this.afterClosed();
  }
  private afterClosed(): void {
    this.dialogRef.afterClosed().subscribe((worksheetName: string) => {
      console.log(worksheetName)
      this.createWorksheet(worksheetName);
    });
  }

Component B

createWorksheet(): void {
    if (this.worksheetName.valid) {
      this.dialogRef.close(this.worksheetName.value);
    }
  }

  errorMessage(): void {
    return Config.ErrorMessages.InvalidWorksheetName;
  }

  cancel(): void {
    this.dialogRef.close();
  }

Component B HTML

<div>
  <mat-form-field class="example-full-width">
    <input matInput placeholder="Ansichtiname" [formControl]="worksheetName">
    <mat-error *ngIf="worksheetName?.invalid">{{errorMessage()}}</mat-error>
  </mat-form-field>
</div>
<mat-card-actions>
  <button mat-button (click)="cancel()">Abbrechen</button>
  <button mat-button (click)="createWorksheet()" [disabled]="worksheetName?.invalid">Speichern</button>
</mat-card-actions>