how do i pass a date from appcomponent .ts to dialog?

Question

I'm trying to create a seat reservation application with datepicker. initially all the messages are seen on an alert, but I decided to move them to the dialogs. as you know better than me to create the dialog you have to create a new component. the problem is that, I can't pass the date that is captured in the first component inside a method that formats the date. how can I do?

I am attaching the relevant codes

appcomponent.html:

<mat-form-field class="example-full-width" appearance="fill">
    <mat-label>Prenota</mat-label>
    <input matInput [matDatepicker]="picker" [(ngModel)]="this.datari.myFormattedDates" (dateChange)="openDialog($event)">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker [dateClass]="dateClass()"  #picker> </mat-datepicker>
  </mat-form-field>

appcomponent.ts:

export class AppComponent implements OnInit {
  dateOfBirth = Date(); 
  pipe = new DatePipe('it-IT');
  currentDate = moment().format('DD/MM/YYYY');
  datari: MyConst = new MyConst(); 

openDialog(event) {
                //catch date
                this.dateOfBirth = event.value;
                //I format the date
                this.datari.myFormattedDates = this.pipe.transform(this.dateOfBirth, 'dd/MM/yyyy'); 
                // open dialog
                this.dialog.open(DialogComponent );
}

dialogcomponent.ts:

export class DialogComponent implements OnInit {

  dialogTitle = 'Parking';
  dialogMessage = 'do you want to book for' + '?' ;


  constructor(public dialog: MatDialog, public dialogRef: MatDialogRef<DialogComponent>,
              @Inject(MAT_DIALOG_DATA) public data: any) { }

  ngOnInit() {

  }

}

dialogcomponent.html:

<h3 mat-dialog-title>{{dialogTitle}}</h3>
<div mat-dialog-content>
        {{dialogMessage}} 
</div>
<div style="float:right;margin:20px;">
  <input style="margin:0px 10px;" type="button" value="confirm" [mat-dialog-close]="true">
  <input type="button" value="cancel"  [mat-dialog-close]="false">
</div>

thanks a lot to everyone :)

I gave a full description here: https://stackoverflow.com/questions/42664974/how-to-pass-data-to-dialog-of-angular-material-2/56190131#56190131 — Darren Street, Sep 18 '20 at 14:12

score 1 · Accepted Answer · answered Sep 18 '20 at 13:41

You will be able to pass data through the open method like this :

this.dialog.open(DialogComponent, {
  data: { date: this.datari.myFormattedDates },
  // Others options
  // width: ...
  // height: ...
  // panelClass: ...
});

And in your dialog component :

constructor(public dialog: MatDialog, public dialogRef: MatDialogRef<DialogComponent>, @Inject(MAT_DIALOG_DATA) public data: { data: any }) { }

ngOnInit() {
  console.log(this.data.date);
}

Take a look at https://material.angular.io/components/dialog/overview

how do i pass a date from appcomponent .ts to dialog?

1 Answers1