ng-bootstrap Modal size
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;}
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' }); }}
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%;}