0

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>
Ashish S
  • 638
  • 6
  • 14
  • Could you share your ts code ? or else it would be great if you could provide a demo using https://stackblitz.com – Nibin May 29 '19 at 04:48
  • @Outlooker Please follow this Stackblitz [link](https://stackblitz.com/edit/angular-kevzjz?file=src%2Fapp%2Fapp.component.html)....check the console on closing any two methods are triggering. – Ashish S May 29 '19 at 09:01

1 Answers1

1

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]
})
Nibin
  • 3,922
  • 2
  • 20
  • 38
  • But I have common modules for the utilities...in this way I have to declare two modules. Can it be possible with single module approch? – Ashish S May 29 '19 at 11:07
  • @AshishSharma Not quite sure about what 2 modules mean in ur case – Nibin May 29 '19 at 11:20
  • I didn't read it properly that you wrote w.r.t. to Component This solved the problem. Thanks – Ashish S May 29 '19 at 11:37