3 thoughts on “How to make the Model Large same as bootstrap Model

  1. When you are opening the modal in your typescript class, the second parameter is the NgbModalOptions object, which includes the size parameter (lg or sm).

    Size is mentioned in the docs, referenced here:
    https://ng-bootstrap.github.io/#/components/modal

    Source code to see how this translates into the rendered template
    https://github.com/ng-bootstrap/ng-bootstrap/blob/master/src/modal/modal.ts
    https://github.com/ng-bootstrap/ng-bootstrap/blob/master/src/modal/modal-window.ts

    Example

      openModal(content) {
        this.modalService.open(content, {size: 'lg'}).result
        .then((result) => {
    
        }, (reason) => {
    
        });
      }
    <ng-template #modalContent let-c="close" let-d="dismiss" id="modal-container">
      <div class="modal-header">
        <button type="button" class="close" aria-label="Close" (click)="d('exit')">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">modal title</h4>
      </div>
      <div class="modal-body">
      some stuff in the body
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger float-left" (click)="c('close-button')">Cancel</button>
        <button type="button" class="btn btn-success float-right" (click)="someAction(c)">
          Submit
        </button>
      </div>
    </ng-template>
    
    
    <button class="btn btn-success" (click)="openModal(modalContent)"></button>
  2. Hi, did that solutions worked? I have tried multiple times this, but the modal is really small.

    this.modalService.open(component, { backdrop: 'static', size: 'lg' });

  3. you can put a class name on open using
    ts
    this.modalService.open(component, { windowClass: ‘classname’});

    use ‘::ng-deep’ for strong code and target the modal-dialog class
    css
    ::ng-deep .classname .modal-dialog{
    max-width: 90%%;
    width: 90%%;
    }