ng-bootstrap Modal size

Question

What is the best way to set/override a custom width for a modal?

It seems ng-bootstrap currently supports

size: \'sm\' | \'lg\'

Answer 1

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