为 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.

When looking to the ngx-bootstrap source code here: modal-options.class.ts

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%);
}

Answer 1

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.