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

You could wrap it into a function like

component.ts

// accepts 'sm', 'md' or 'lg' as argument.
// default argument 'md'
public openModal( dialogSize: 'sm' | 'md' | 'lg' = 'md'): void {
  let modalOptions = {};
  if (dialogSize === 'sm' || dialogSize === 'lg') {
    modalOptions = { size: dialogSize };
  } else {
    modalOptions = { windowClass: 'md-class' };
  }
  this.modalService.open(ConfirmationDialogComponent, modalOptions);
}

component.css

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

And call it like,

openModal(); //argument 'md'
openModal('sm'); //argument 'sm'
openModal('md'); //argument 'md'
openModal('lg'); //argument 'lg'