Show data in json view after injection in a matDailog (Angular 9+)

Question

I need to show data in JSON view inside MatDialog. I am using an API to fetch some data and then injecting it into the dialog box using data option of MatDialog. Data is being injected successfully and also accessible in the dialog component. I'm using ngx-json-viewer package to display this data in JSON view but it's not working. Here's how I'm opening the dialog box and passing data into it-

const logDetailsDialogRef = this.dialog.open(logDetailsDialog, {
    data: {
        logDetails
    }
});

And here is what I am using on my template page-

<ngx-json-viewer [json]="data.logDetails"></ngx-json-viewer>

Answer 1

You must inject @Inject(MAT_DIALOG_DATA) public data in your constructor.

  constructor(
        @Inject(MAT_DIALOG_DATA) public dataF,
        private sanitizer: DomSanitizer,
    
      )
    
     ngOnInit(): void {
    
    
      this.data = this.dataF;
    
    
      }

this remains the same:

const logDetailsDialogRef = this.dialog.open(logDetailsDialog, {
    data: {
        logDetails
    }
});