Search code examples
angulartypescriptmat-dialog

Unable to access object properties

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 enter image description here

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

  1. Is the object injected correctly in the dialog component?
  2. Is it the Typescript issue since I've not defined proper types for the object?
Solution

  • Remove curly bracket at this line.

    dialogConfig.data = journey;