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.
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
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],
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With