How to open bootstrap modal from parent component?

Question

css

There is a Bootstrap modal window (in an Angular 2+ project):

<div bsModal #largeModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>

opens modal: A modal component that is inserted into the parent. The question is how to open the modal (largeModal.show()) from the parent component? * PS typescript does not know what largeModal.show() is;
(click)="largeModal.show()"

Answer 1

I do it like this:

<button type="button" class="btn btn-sm btn-outline-success" (click)="openVerticallyCentered(content)">Create new</button>
<ng-template let-c="close" let-d="dismiss" #content>
  <app-create-single-form [book]="activeBook" [user]="activeUser" [c]="c" [d]="d"></app-create-single-form>
</ng-template>

openVerticallyCentered(content): void {
    this.modalService.open(content, {centered: true, size: 'lg'});
  }