How to get JSON data into Dialog Component

Question

Before this, the JSON Data appears when hovering over the info icon. Now i wish to pass the JSON Data into a dialog when click the info icon. But i dont know how.

HTML

<h2 mat-dialog-title>Info</h2>

<mat-dialog-actions>
  <button mat-button (click)="matDialogRef.close()">Ok</button>
</mat-dialog-actions>

---

Dialog-Component.ts


import { Component, OnInit, Input, Inject, ViewEncapsulation, HostListener } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef} from '@angular/material';
import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
import { PlannerProject } from 'app/services/planner-projects/planner-project';

@Component({
  selector: 'app-my-dialog',
  templateUrl: './my-dialog.component.html',
  styleUrls: ['./my-dialog.component.scss']
})
export class MyDialogComponent implements OnInit {

  @Input() project: PlannerProject;

  projectData: string;

  constructor(public matDialogRef: MatDialogRef<MyDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any) { }

  ngOnInit() {
  }

  ngOnChanges(event): void {

  if (event.project !== undefined) {
    this.projectData = JSON.stringify(this.project, null, 2);
  }
}
  ok(): void {
    this.matDialogRef.close();
  }

}

---

Delivery-Order.Component.ts

import { DeliveryOrderEditComponent } from './../delivery-order-edit/delivery-order-edit.component';
import { SelectionModel } from '@angular/cdk/collections';
import { Component, OnInit, ViewChild, OnDestroy, ElementRef, Input, OnChanges } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { PlannerProjectsService } from 'app/services/planner-projects/planner-projects.service';
import { map, switchMap, tap, debounceTime, distinctUntilChanged } from 'rxjs/operators';
import { DeliveryOrdersService } from '../delivery-orders.service';
import { Observable, of, Subscription, fromEvent } from 'rxjs';
import * as moment from 'moment';
import { MatPaginator, MatSort, PageEvent, MatTableDataSource, MatDialog } from '@angular/material';
import * as _ from 'lodash';
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
import { DeliveryOrder } from '../delivery-order';
import { MyDialogComponent } from './../my-dialog/my-dialog.component';
import { PlannerProject } from 'app/services/planner-projects/planner-project';
import { FuseConfirmDialogComponent } from '@fuse/components/confirm-dialog/confirm-dialog.component';
import { UploadExcelService } from 'app/services/upload-excel.service';

@Component({
  selector: 'app-delivery-orders',
  templateUrl: './delivery-orders.component.html',
  styleUrls: ['./delivery-orders.component.scss']
})
export class DeliveryOrdersComponent implements OnInit, OnDestroy, OnChanges {
  @Input() project: PlannerProject;

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  selection: SelectionModel<DeliveryOrder>;

  importId: string;
  dataTable;
  sub: Subscription;
 projectData : string;

  // _filter: string;
  _sortBy: string;
  _sortOrder = 'asc';
  _pageSize = 10;
  _pageIndex = 1;

  _options = {
    pageSize: 100,
    pageSizeOptions: [100, 150, 200, 250]
  };

  _displayedColumns = [
    { displayName: 'Location Name', column: 'locationName', sort: true },
    { displayName: 'Delivery Address', column: 'address', sort: false },
    { displayName: 'Is Valid', column: 'isValid', sort: false },
    { displayName: 'Import At', column: 'importedAt', sort: false },
    { displayName: 'File Name', column: 'importFileName', sort: false },
    // { displayName: '', column: '' },
    // { displayName: '', column: '' },
  ];

  _displayColumns: string[] = ['selectRow', 'locationName', 'address', 'quantity', 'weight', 'volume', 'remarks', 'importedAt', 'actions'];

  _actions = [
    {
      text: 'Edit',
      action: (row) => {
        console.log(`row`, row);
      }
    }
  ];

  _dataSource: MatTableDataSource<DeliveryOrder>; // = new DeliveryOrdersDataSource(this.deliveryOrderService, '');
  _filter: string | Observable<string>;

  // @ViewChild('listHeader') listHeader: PageListTemplateComponent;
  @ViewChild('search') search: ElementRef;

  constructor(private route: ActivatedRoute,
              private router: Router,
              private projectService: PlannerProjectsService,
              private deliveryOrderService: DeliveryOrdersService,
              private uploadExcelService: UploadExcelService,
              private _matDialog: MatDialog) { }

              openDialog(): void {
                const Ref = this._matDialog.open(MyDialogComponent, {  
                });

                Ref.afterClosed().subscribe(result => {
                  console.log('The dialog was closed');
                  console.log(result);
                });
              }

  ngOnInit(): void {
    this.initDataTable();
  }

  ngOnDestroy(): void {
    console.log(`destroy`);
    if (this.sub) {
      this.sub.unsubscribe();
    }
  }

  ngOnChanges(): void {
    if (this.project !== undefined) {
      this.projectData = JSON.stringify(this.project, null, 2);
      this.loadList(this.project.importId).toPromise().then((data) => {
        console.log(`data`, data);
        _.map(data, this.formatData.bind(this));
        this.dataTable = data;
        this._dataSource.data = this.dataTable;
        this.selection = new SelectionModel<DeliveryOrder>(true, []);
      });
    }

So when i click the info icon, it shall display the JSON data in the dialog box. i also added the Delivery-order.component. I dont know much about JSON, so im very weak in trying to solve this problem to make the JSON values show up

Answer 1

Try something like this.

First method will open dialog and will pass all the data of the project

 openDialog(): void {
   const Ref = this._matDialog.open(MyDialogComponent, { data: this.project });

And in the dialog just use as the @Simo said
This will Inject the passed data from component to dialog

constructor(public matDialogRef: MatDialogRef<MyDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) { 
console.log(this.data);
}

Answer 2

When you create your dialog in delivery-component you can define input data for your dialog component, in this way:

const Ref = this._matDialog.open(MyDialogComponent, {  
            data: { id: 'id-value' }
        });

Then you can recover your data in your dialog component:

constructor(public matDialogRef: MatDialogRef<MyDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any) { 
    console.log(this.data.id);
}

In this example this.data will contain the data passed from your main component to dialog, the id field is only an example, you can pass whatever you want to dialog component.