angularmodal-dialogbootstrap-modalngx-bootstrapngx-modal

Single instance problem of ngx-bootstrap modal

I have developed three different components from ngx-bootstrap modal 1. Modal 2. iFrame modal 3. Alertbox modal

I just pass the template in these component and they render it.

But the problem comes when I use any two in single template. Which share same instance. So when I hide one modal, then other modal Output hidden also triggers.

I think this is due to the same BsModalService service utilization. So any solution for this?

<app-new-modal (hidden)="onModalHidden()">
<div heading>Heading</div>
</app-new-modal>
<app-iframe-modal #iframe (hidden)="onIframeHidden()">
<div heading>Heading</div>
</app-iframe-modal>
Solution

  • Try instantiating a service respective to that particular component. Since you are subscribing to the modal close and emitting the event, this seems to call on all scenarios irrespective of that particular component. Hope this helps :)

    @Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.css'],
  providers: [BsModalService]
})

---------------------------------------------------------

@Component({
  selector: 'app-alertbox',
  templateUrl: './alertbox.component.html',
  styleUrls: ['./alertbox.component.css'],
  providers: [BsModalService]
})