How to create ng-bootstrap modal with persistent component?

Question

I'm trying to implement a modal with angular following this tutorial (https://ng-bootstrap.github.io/#/components/modal - section "Components as content"), but I want the component displayed in the modal to persist it's state once closed for the next time it's opened.

I've created a simple Plunker example: http://plnkr.co/edit/EJyZ6nF5WVAS9bvQycQe?p=preview

What I want to achieve is that a call to open() after a call to openA() will show the text "Hello, A!" but it's not keeping the state.

openA() {
  const modalRef = this.modalService.open(NgbdModalContent);
  modalRef.componentInstance.name = 'A';
}

openB() {
  const modalRef = this.modalService.open(NgbdModalContent);
  modalRef.componentInstance.name = 'B';
}

open() {
  const modalRef = this.modalService.open(NgbdModalContent);
}

¿How can this minimum setup be created? ¿Or which angular documentation do you recomend to understand what's going on?

pkozlowski.opensource pkozlowski.opensource · Accepted Answer · 2017-05-16T19:10:02

Every time a new modal is opened with a component as content, the said component will be re-created (and destroyed on modal close). In this sense you can't "persist" component instances.

What you should be doing instead is to keep around model (data) that is driving component's display and behaviour.

How to create ng-bootstrap modal with persistent component?

1 Answers