How to make the Model Large same as bootstrap Model

[AnsarSamad]

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

[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>

[pkozlowski-opensource]

Thnx for helping out with the issues @paustint - much appreciated!

[adrianabreu]

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

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

[HardieChristie]

Hello !
I have the same problem but these solutions do not work for me.

any help please. Thank you!