Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Multiple services with Primeng dynamic dialogs interfere with each other

I am struggling with an angular/primeng problem. I have two services in different modules each of which use DialogService to create a DynamicDialog component.

I have read that you need separate instances of the DialogService if you have multiple modals at the same time. I tried to accomplish this by putting each service in their own module and putting DialogService in the "providers" section of each module.

Each modal works fine by itself, but I have a situation where both modals are displayed simultaneously. In this case, after I close the second modal, I can't close the first modal, even though the close code is fired and returns result.

The stackblitz for an example of this problem is:

https://stackblitz.com/github/thomasesh/twomodalproblem

Any help would be greatly appreciated.

like image 668
T Esh Avatar asked Feb 19 '20 19:02

T Esh


2 Answers

the reason is angular DI. you importing module-a and module-b in app-module. they both provide DialogService. and because of how DI works the SINGLE instance of a service is created. it is imo primeng bug, but to workaround it you can create a token and provide(and inject also) second instance of a service with the token, rather than using the same instance of a service

// token.ts
export const DialogServiceToken = new InjectionToken('DialogService');
//module-b.ts

providers: [
 { provide: DialogServiceToken, useClass: DialogService} // this will register second instance of DialogService
]

//module-b.service
constructor( @Inject(dialogServiceToken) private dialogService: DialogService) {} // here we inject the second instance of a service 
like image 140
Andrei Avatar answered Nov 11 '22 06:11

Andrei


Andrei in accepted answer has explained well the "bug" in primeng however for me it was sufficient to add a new DialogService to providers in the component that is opening the second dynamic dialog

@Component({
  templateUrl: './....component.html',
  providers: [DialogService],
})
like image 1
Petter Friberg Avatar answered Nov 11 '22 05:11

Petter Friberg