I'm currently using NgbModal and the Modal is opening from Top to Bottom by default. Is there a way to make it appear from right to left instead? I have already set up the positioning so that it appears in the right corner of the screen, but I can't seem to figure out how to change the direction of opening.
I checked their API documentation but couldn't find any option for changing the direction.
For reference, you can visit their example page. Additionally, here is the StackBlitz of their first example which can serve as a minimum reproducible example.
I also came across this answer on Stack Overflow which uses pure bootstrap and not abstraction like ng-bootstrap. I'm 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)}`;
}
);
}
Any help would be greatly appreciated!