1

I am new to Angular and seem to have gotten into deep water for something that seems like it should be simple. I am having a problem using a ngx-bootstrap modal dialog. I am using the ModalContentComponent pattern.

export class ModalContentComponent implements OnInit {
 title: string;

 constructor(public bsModalRef: BsModalRef, private myService: MyService) {}

 ngOnInit() {
   ...
 }

 onSubmit(form: NgForm){
   ...
   this.myService.sort();
   this.bsModalRef.hide();
 }

I have a component which opens the modal which injects one of my services and BSModalService as follows:

constructor(private myService: MyService, public modalService: BsModalService ) {}

I open the modal from this component with the following:

openModalWithComponent() {
  const initialState = {  
    title: 'Preferences';
    ...
  };

  this.bsModalRef = this.modalService.show(ModalContentComponent,{initialState}); 
}

I import the ModalContentComponent and have it added to the declarations array in my app.module.ts. I also have my service identified only at this level as a provider.

import { ModalContentComponent } from '.my.component';
import { MyComponent } from '.my.component';
import { MyService } from '.my.service';

declarations: [
  MyComponent,
  ModalContentComponent,
],
providers: [MyService],

In order to get the modal to work I have had to add ModalContentComponent to the app.module.ts entryComponents array. Once I do that the modal comes up and everything appears to work. 

entryComponents: [
  ModalContentComponent
]

However, the myService service is not being treated as a Singleton. ModalContentComponent is getting its own service instance of MyService.

How do I get ModalContentComponent to use the single shared instance of myService?

I think the entryComponents inclusion is causing the issue with the additional service instance but I can't get the modal to work without it.

Any pointers welcome.

NWKC
  • 21
  • 3
  • I don't understand your comment. I don't think I am adding the service to the providers of any components. It is only added as a provider in app.module.ts providers. It is then injected in components via constructor. Works great in every component except the modal. Am I missing something regarding you comment? – NWKC Apr 08 '18 at 21:37
  • Sorry, I misread what you were saying. Just disregard my previous comment. – JB Nizet Apr 08 '18 at 21:40
  • NP. thanks for taking a look – NWKC Apr 08 '18 at 21:52
  • I have not been able to figure out how to stop the extra service instance being created for the modal. Based on information I found about lazy loaded components I tried restructuring things and using forRoot and that did not solve it either. The whole point of using the service was simply to get data back from the modal so I have changed approaches and am using an observable on close which is working. I would still very much like to know why this is happening and what the solution would be. – NWKC Apr 09 '18 at 05:41

1 Answers1

1

I figured out what the problem was. Turns out there was a wrapping component which had a provider statement for the service. So it was operator error. The service approach with a modal would have worked.

NWKC
  • 21
  • 3