1

I tried to upload my code to Stackblitz to look for help when I call my dynamic modal. I am doing a function that I hope to call in any component to generate a dynamic popup in which I can dynamically change the header, body and footer of the popup. In my real code, these values are not refreshed. but it happens that when uploading the code to this platform Stackblitz the popup is never shown even though the service is being consumed. How can I fix it ?

This is my code:

https://stackblitz.com/edit/angular-qothyw

halfer
  • 19,824
  • 17
  • 99
  • 186
yavg
  • 2,761
  • 7
  • 45
  • 115
  • This is nearly a total copy+paste of your previous question: [In my template the values are not reloaded](https://stackoverflow.com/questions/50324683/in-my-template-the-values-are-not-reloaded) – halfer Oct 12 '20 at 21:39

1 Answers1

0

You should avoid mixing jQuery and Angular when possible. In your case, what you are trying to achieve doesn't justify the use of jQuery.

Instead of showing your modal with jQuery in your service, you should implement a show/hide mechanism in your modal component. The easiest way is with *ngIf but if you're looking for a cleaner way, I suggest you use Overlay from Angular CDK

Then show your modal in your service's subscription into the modal component.

That said, your problem with StackBlitz comes from the line providers: [AppService] missing from your modal's @Component annotation.

Edit :

This configuration doesn't work because a service is instantiated for each component, thus you cannot emit events from one component to another. You should remove the providers: [AppService] from every component.

Edit :

Your StackBlitz actually fails because you put a comment into JSON configuration in modal.component.ts file (Can comments be used in JSON?).

Working StackBlitz : https://stackblitz.com/edit/angular-peugm6

Guerric P
  • 30,447
  • 6
  • 48
  • 86
  • Are you telling me that I should not mix angular and jquery? Good practices say I should not use jquery? I'll keep it in mind, but where I work I use bootstrap and it depends on jquery. For my question, I want to know how to correct my problem to learn about what I am doing wrong. I appreciate the link you sent me but for now I want to know how to correct what I have. – yavg May 13 '18 at 17:01
  • you're right! So the first part of my question is corrected, the second is that I do not know why the values that I assign to the function are not shown. I do it in the home component, where I call the function. I updated the link – yavg May 13 '18 at 18:46
  • About your problem, please see my edited answer. About jQuery, it's a library that manipulates the DOM while Angular abstracts DOM manipulations. If you want to implement bootstrap in Angular in a cleaner way, you should take a look at "ng-bootstrap" or "ngx-bootstrap" – Guerric P May 13 '18 at 18:47
  • thanks for replying I see that you know a lot. but previously my problem was not to inject my service into the modal component, if I remove it it will not work .. – yavg May 13 '18 at 20:41
  • I tested it, it works. If you're talking about stackblitz, then it's probably an issue related to stackblitz itself and I'm afraid I cannot help more – Guerric P May 13 '18 at 21:02
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/170984/discussion-between-youkouleley-and-yavg). – Guerric P May 14 '18 at 07:29