Manually trigger ngx-bootstrap modal via TemplateRef

Question

I would liketo trigger a modal dynamically via typescript. I know this should be easy, so I'm probably looking over something.

Somewhere in Template:

<ng-template #adminmodal>.....Some content right here......</ng-template>

Component:

Trying to make a TemplateRef from the #adminmodal

@ViewChild('adminmodal', { read: TemplateRef }) _adminModalRef: TemplateRef<any>;

Trying to trigger and failing miserably

this.modalRef = this.modalService.show(this._adminModalRef);

It opens a modal, but with an empty modal-content, so there is something wrong with my approach.

Answer 1

Your approach should work, maybe there is a bug inside ngx-boostrap (https://github.com/valor-software/ngx-bootstrap/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+modal)

Another way according to the docs you could try is via the modalDirective

Template

<div class="modal fade" bsModal #modal="bs-modal">...</div>

Typescript

  @ViewChild(ModalDirective) modal: ModalDirective;

  showModal() {
    this.modal.show();
  }

Hope this helps you out, good luck!