NgbModal how to make the modal appear from right to left instead of default top to bottom

Question

I'm using NgbModal and there the Modal is opening from Top to Bottom by default when opening. Is it to possible to make it appear from right to left. I have set up the positioning already such that it is at the right corner of the screen. But cannot figure out the direction of opening

I looked at their API but couldn't find an option for direction. https://ng-bootstrap.github.io/#/components/modal/examples

Here is stackblitz of their first example which could be a minimum reproducible example

I also found this answer which uses pure bootstrap and not abstraction like ng bootstrap, so not sure how it can be applied to NgbModal

<ng-template #content let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Profile update</h4>
    <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Crossclick')"></button>
  </div>
  <div class="modal-body">Modal Content</div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-secondary" (click)="modal.close('Save click')">
      Save
    </button>
  </div>
</ng-template>

<button class="btn btn-lg btn-outline-primary" (click)="open(content)">
  Launch demo modal
</button>

<hr />

<pre>{{ closeResult }}</pre>

  open(content: TemplateRef<any>) {
    this.modalService
      .open(content, {
        ariaLabelledBy: 'modal-basic-title',
        animation: true,
      })
      .result.then(
        (result) => {
          this.closeResult = `Closed with: ${result}`;
        },
        (reason) => {
          this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
        }
      );
  }

Help much appreciated

Answer 1

If are only a few modals you want from left to rigth, you can add in your styles.scss (or what-ever styles "global")

.modal.fade:not(.show) .from-left.modal-dialog {
  transform: translate(-50%,0);
}

Then, when you open pass the class "form-left"

this.modalService
  .open(content, {
    ariaLabelledBy: 'modal-basic-title',
    animation: true,
    modalDialogClass:'from-left' //<--this add the class "from-left"
  }).result(...)

If are all the modal you can use simply

.modal.fade:not(.show) .modal-dialog {
  transform: translate(-50%,0);
}

In the stackblitz I add the styles in the own index.html