Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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;
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading