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

Add size xl on interface NgbModalOptions.

export interface NgbModalOptions {
   size?: 'sm' | 'lg' | 'xl';
}

Now use it while opening the modal this.modalService.open(content, { size: 'xl' });

Answer 2

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

Answer 3

In addition to djpalme and Kapil Thakkar answers, you will need to set the 'encapsulation' of your Component to None as mentioned here

@Component({
    selector: 'app-generic-view',
    templateUrl: './generic-view.component.html',
    styleUrls: ['./generic-view.component.scss'],
    encapsulation: ViewEncapsulation.None
})