Angular – @Inject(MAT_DIALOG_DATA) doesn’t allow property access

I’m injecting data of type Sequence into a modal

  openDialog(head: Sequence) {
    this.dialog.open(ModalAsTreeComponent, {
      width: '90%',
      height: '580px',
      maxHeight: '100vh',
      maxWidth: '100vw',
      data: {
        sequence
      }
    });
  }

This is the interface:

import { TreeNode } from './treeNode';
export interface Sequence{
  id: string;
  prefix: string;
  rRC: number;
  collectorPeer: {
    peerBGPId: number;
    peerIPAddress: string;
    peerAS: number;
  };
  start: string;
  end: string;
  runID: string;
  longestCommonAsPathSuffix: number;
  asPathNumber: number;
  asOrigins: number;
  hasAggregator: boolean;
  containsAsPathLoops: boolean;
  containsLoops: boolean;
  mostFrequentUpdateFrequency: number;
  mostFrequentUpdateFrequencyInMin: number;
  hasAsPathsNotValid: boolean;
  asTreeWithoutAggregator: {
    head: TreeNode;
  };
  announces: number;
  withdraws: number;
  updates: number;
  duration: string;
  frequency: number;
}

I inject the data into the modal and I console.log it:

export class ModalAsTreeComponent implements OnInit {

  ...
  constructor(@Inject(MAT_DIALOG_DATA) public data: Sequence) { }

  ngOnInit(): void {
      console.log(this.data);
  }

Everything is fine, data is shown in the console and I can see every value of each property. The problem resides in trying to access any of these properties. If I try to console.log any of this properties, let’s say the property announces, console.log(this.data.announces) gives undefined which doesn’t seem to make sense because console.log(this.data) gave all the data including the value of announces. There seems to be a problem with accessing the properties of the original injected data. This is the original result of console.log(this.data)

announces: 732493
asOrigins: [31424]
asPathNumber: 12
asTreeWithoutAggregator: {head: {…}}
collectorPeer: {peerBGPId: 0, peerIPAddress: "2a07:a40::", peerAS: 48821}
containsAsPathLoops: true
containsLoops: false
duration: "84.22:53:52"
end: "2019-03-26T22:53:52Z"
frequency: 0.09979425157819476
hasAggregator: false
hasAsPathsNotValid: false
id: "5ee56984a62b68061ce5b638"
longestCommonAsPathSuffix: 1
mostFrequentUpdateFrequency: 176682
mostFrequentUpdateFrequencyInMin: 1.4442607334681918
prefix: "2a0d:8d80::/32"
rRC: 0
runID: "RRC00-v6"
start: "2019-01-01T00:00:00Z"
updates: 732493
withdraws: 0

Needless to say that I can’t work with undefined values

Answer

You can simply pass your object, without wrapping it into another object.

So it would look like :

this.dialog.open(ModalAsTreeComponent, {
  width: '90%',
  height: '580px',
  maxHeight: '100vh',
  maxWidth: '100vw',
  data: sequence
});