Ngx-bootstrap: Any way to control class="modal-dialog" & class="modal-content" in BsModalService ?

[AbhijitMuke]

Actually I am searching for way to get control over class="modal-dialog" & class="modal-content" while opening modal by using BsModalService.

My application has different type of modal with different size of height width. In Angular 1.5.x we were sending modal configurable option and add them accordingly in windowTemplateUrl file.Now, I am trying to implement same configurability in ngx-bootstrap-modal.

In Angular 1.5.x we were using ui.bootstrap.modal

I found that BsModalService place dynamic component within modal-content div.

Due to this, there is no way to control over these two parent div.

I supposed to add height,width,header title in dynamic way by passing from hosting controller.
I would also like to add modal draggability in class="modal-content"

[IlyaSurmay]

You can add another css class to modal:
this.modalService.show(Component, {class: 'modal-lg'}));
and after that you'll be able to control width, height, position, etc.
If you want to fully control modal template, use directive instead of service

[qwe852147]

Sorry , I have the same problem.
I want to set modal height size and I set custom class to modal via modalService.
I use css with :host /deep/ but nothing change.

[abelardolg]

I added this class inside my 'styles.css' of my project:
.big-model-dialog {
width: 900px;
}
I added it to config options:
const config = {
animated: true,
keyboard: true,
backdrop: true,
ignoreBackdropClick: true,
class: 'big-model-dialog'
};

then I added this config values to sho the modal dialog:
const modalConfirmacion = this.modalService.show(ConfirmModalComponent, config);

but inspecting the content of my html, I see this:

class="modal-dialog big-modal-dialog"
--------------^
How could I override your 'modal-dialog' class which is inserted by default?

Best regards.

[manojsingh047]

Do we have any solution to this yet?

[AbhijitMuke]

You can override all modal related classes in your component SCSS file by adding encapsulation: ViewEncapsulation.None to your modal component under @Component decorator.

Use your style with modal class name like - modal-content modal modal-header