Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Primeng - dialog service passing data to dialog component

Using PrimeNg's dynamic dialogue example shows how the destination dialogue can get data and display. I can go through creating a service with observables to pass the data to the dialogue, but I know there are some arguments available to the dialogue service (like data) that can be passed through. How would the dialogue retrieve the data passed through the service?

https://www.primefaces.org/primeng/#/dynamicdialog https://github.com/primefaces/primeng/blob/master/src/app/components/dynamicdialog/dynamicdialog-config.ts https://github.com/primefaces/primeng/blob/master/src/app/components/dynamicdialog/dialogservice.ts

like image 591
dirtyw0lf Avatar asked Feb 02 '19 05:02

dirtyw0lf


2 Answers

Inside Parent Component:

this.dynamicDialogRef = this.dialogService.open(EmployeeDialogComponent, {
    header: 'View Employee Details for - ' + this.employee.name,
    width: '90%',
    contentStyle: {"min-height": "800px", "overflow": "auto"},
    baseZIndex: 10000,
    data: {employee: this.employee}
});

Inside Dialog Component:

export class EmployeeDialogComponent implements OnInit {
constructor(public ref: DynamicDialogRef, public config: DynamicDialogConfig) { 
     console.log("Data: " + JSON.stringify(config.data.employee));
}
ngOnInit() {}
}
like image 153
Balram Sahu Avatar answered Sep 21 '22 12:09

Balram Sahu


The dynamic dialog has an option in the constructor to pass data. example,

const ref = this.dialogService.open(MyComponent, {data : myData});

UPDATE

you should inject DynamicDialogService on your constructor and then you can access data which you passed on your dialog

code is here :

constructor( private dialogService: DynamicDialogService) {}

and then you can access and see all data you passed like this:

console.log(this.dialogSerive.data)
like image 40
dirtyw0lf Avatar answered Sep 18 '22 12:09

dirtyw0lf