How to get JSON data into Dialog Component - html

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

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.

Answer 2

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);
}