ng-bootstrap Modal size

Solution 1:

The cleanest solution that I could find is to use the windowClass property.

I.e.:

this.modalService.open(MyModalComponent,  { windowClass : "myCustomModalClass"});

Then add the following to your global CSS styles. This is important as the style won't be picked up from your components CSS.

.myCustomModalClass .modal-dialog {
  max-width: 565px;
}

Solution 2:

Try like this :

import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { ModelComponent } from './model.component';

export class Component {

    constructor(private modalService: NgbModal) {}

    open() {
        const modalRef = this.modalService.open(ModelComponent, { size: 'lg', backdrop: 'static' });
    }

}

Solution 3:

I found this as a good solution.

this.modalService.open(MyComponent, { windowClass: 'my-class'});

ng-deep “shadow-piercing” descendant combinator can be used to force a style down through the child component tree into all the child component views. In this case modal-dialog class.

::ng-deep .my-class .modal-dialog { 
     max-width: 80%;
     width: 80%;
}