title: How to hide ngx-bootstrap modal without destroy the modal component?
body: <p>Is there a way to hide BsModal without destroying the modal's component?
  What I would like to achieve is that, once the modal is shown the first time, it doesn't recreate MyComponent every time is hide/shown again. Once it is build the first time is just a matter of showing or not to the user and not rebuilding the whole component. </p>
  
  <p>I need this because I would like to provide a service in the MyComponent providers and I expect the same instance of that service if I close and reopen the modal.</p>
  
  <p>I have a component:</p>
  
  <pre><code>@Component({
    selector: 'my-component',
    template: '&lt;p&gt;Hi from my component&lt;/p&gt;'
  })
  export class MyComponent implements OnInit {
  
    ngOnInit(): void {
      console.log('want to show this message only once');
    }
  }
  </code></pre>
  
  <p>I'm using ngx-bootstrap modal to show this component</p>
  
  <pre><code>export class AnotherComponent() {
  
    private modalRef: BsModalRef;
  
    constructor(private modalService: BsModalService) {}
  
    showModal(): void {
      this.modalService.show(MyComponent);
    }
  
    hideModal(): void {
      this.modalRef.hide();
    }
  }
  </code></pre>
  
  <p>I would like to have ngOnInit() executed only the first time the modal is open.</p>