Way to add or apply multiple classes for ngx-bootstrap modal

Question

I want to show an ngx-bootstrap modal centered and in a large format.

There is two classes for this: modal-dialog-centered and modal-lg but I don't see any way to apply these classes at the same time.

There is an optional class property defined as class?: string;. but it's not defined as an array of classes that we can apply.

so now I can show the modal centered by using:

this.bsModalRef = this.modalService.show(ConfirmationComponent,
    {class: 'modal-dialog-centered', initialState});

or a large modal but not centered:

this.bsModalRef = this.modalService.show(ModalConfirmationComponent,
    {class: 'modal-lg', initialState});

I tried to add this to the beginning template of the modal:

<div class="modal-dialog modal-lg">
  <div class="modal-content">
    <div class="modal-header">
    ...

But no luck as well, the class modal-lg don't want to work

Anyone have an idea how to get this to work ?

Update

This CSS looks to give some result but not behaving completely well:

::ng-deep .modal.show .modal-dialog {
  -webkit-transform: translate(50%, 50%);
  transform: translate(0%, 50%);
}

@MikeOne: yes it works that way, is this explained somewhere in the official documentation ? — HDJEMAI, Aug 23 '20 at 08:32

score 1 · Accepted Answer · answered Aug 23 '20 at 08:30

The suggestion provided by @MikeOne works perfectly.

So adding space separated classes will provide the ability to apply more than one class to the modal.

we can show the modal perfectly centered and large one with this code:

this.bsModalRef = this.modalService.show(ModalConfirmationComponent,
  {class: 'modal-dialog-centered modal-lg', initialState});

So far, I don't see where this is documented in the official documentation.

1 Answers1