How to make the Model Large same as bootstrap Model

now the Model has class name as ‘modal-dialog’ , how can i use <div class="modal-dialog modal-lg"> to make the Model large ?

[Stanley521]

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

[paustint]

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>