Scenario I'm injecting data into mat-dialog from my journeys-list component. The data (journey object) is passed and received in the dialog-component correctly. However when I try to access one of its property, that property seems undefined while my journey object certainly contains all values. as shown
journeys-list.component.ts
import { Component, OnInit } from '@angular/core';
import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
import { Router } from '@angular/router';
import { DialogComponent } from '../dialog/dialog.component';
@Component({
selector: 'app-journeys-list',
templateUrl: './journeys-list.component.html',
styleUrls: ['./journeys-list.component.scss']
})
export class JourneysListComponent implements OnInit {
constructor(private router: Router,
private dialog: MatDialog) { }
journeysObject: any;
ngOnInit(): void {
this.journeysObject = history.state;
console.log(this.journeysObject);
}
parseTime(timestamp: any): any {
const date = new Date(timestamp);
return date.getHours() + ':' + date.getMinutes();
}
openDialog(journey: any) {
const dialogConfig = new MatDialogConfig();
dialogConfig.disableClose = true;
dialogConfig.width= '50%';
dialogConfig.height= '50%';
dialogConfig.data ={journey};
this.dialog.open(DialogComponent, dialogConfig);
}
}
dialog-component.ts
import { Component, Inject, OnInit } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
@Component({
selector: 'app-dialog',
templateUrl: './dialog.component.html',
styleUrls: ['./dialog.component.scss']
})
export class DialogComponent implements OnInit {
journey:any={};
constructor(
public dialogRef: MatDialogRef<DialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) {
this.journey = data;
const type = this.journey.type; // undefined
}
ngOnInit(): void {
}
parseTime(timestamp: any): any {
const date = new Date(timestamp);
return date.getHours() + ':' + date.getMinutes();
}
close() {
this.dialogRef.close();
}
}
Question My exact question is
Remove curly bracket at this line.
dialogConfig.data = journey;