Primeng - dialog service passing data to dialog component

Question

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

Socher

Answer 1

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)

Socher

And then ow do you access data? – Dialectal

I updated this answer to latest version of primeng services approved it please❤❤ – Shepard

Answer 2

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() {}
}

Edict

This is an expected solution, but stops working if you accidentally have DynamicDialogConfig in providers: [] – Most

As a note, if you, like me, want to reused a component as both a dialog and a stand alone component, then you will have to make the config optional @Optional() private dialogConfig: DynamicDialogConfig – Basiliabasilian

Answer 3

For Angular 17+ and standalone components:

// Your dialog component    

@Component({
  selector: 'app-test',
  standalone: true,
  providers:[DialogService]
})
export class TestComponent {

  config = inject(DynamicDialogConfig);
  constructor() {
    console.log('Test', this.config.data)
  }
}

Do not forget provide DialogService

And in your parent component call show():

@Component({
  selector: 'app-parent',
  standalone: true,
  providers: [DialogService]
})

  dialogService = inject(DialogService);
  show() {
    this.dialogService.open(TestComponent, {
      data: {
        test: 'MyData'
      },
    });
  }

The main problem with the previous answers is that they do not show that you need to provide the service in both components. Both in the parent and the called one. Also in the official primeng documentation there is no link to an example of the component being called. This also creates confusion.

Heterotaxis

Answer 4

I had same problem. I deleted:

providers: [DialogService]

from component that will I passing data (dialog component)

Mixtec

Answer 5

Just for anyone coming late to the post since accepted answer not working

In the Parent component you send the data as follow

export class DynamicDialogDemo {

    ref: DynamicDialogRef | undefined;
    
    constructor(public dialogService: DialogService) {}

    show() {
        this.ref = this.dialogService.open(ProductListDemo, { 
            // Add the data you want to send to child to data propriety 
            data: {
                id: '51gF3'
            },
            header: 'Select a Product'
        });
    }
}

and then in the Child component, you can access the data using the DynamicDialogConfig service as shown:

export class ProductListDemo {
  constructor(
    // Inject DynamicDialogConfig
    private dialogConfig: DynamicDialogConfig
  ) {}
  ngOnInit() {
  // Access data as follow
   console.log("~ this.dialogConfig.data:", this.dialogConfig.data)
  }
}

Alvinalvina

Answer 6

They did not mention in documentation how to access passed data. However you can do following code to get access.

export class BlogDetailComponent implements OnInit{

  constructor(private dialogService: DialogService,
              private ref: DynamicDialogRef) {
  }

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

Tiu

Answer 7

That worked for me, too!

And a second hint: Do not forget to declare the provider in NgModule:

import { DialogService, DynamicDialogModule } from 'primeng/dynamicdialog';

@NgModule({
  providers: [
      DialogService
  ]
})

Puke

Please don't add "thank you" as an answer. Once you have sufficient reputation, you will be able to vote up questions and answers that you found helpful. - From Review – Dredger