ngx-bootstrap: Modal opens up as small instead of large

Question

I am calling a modal from another component and the problem is I can only get it to open as small, not as large

comp1.html

<button type="button" class="btn btn-outline-primary btn-lg" (click)="openModal()">Upload

comp1.ts

import {modalComponent} from '../pages/modals/new-modal';

private modalService: BsModalService

constructor(private modalService: BsModalService)

openModal() {
    this.bsModalRef = this.modalService.show(modalComponent);
 }

modal.component.ts

constructor(private modalService: BsModalService, public bsModalRef: BsModalRef)

modal.html

<div bsModal #newModal="bs-modal"  tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
      </div>
    </div>
 </div>

Answer 1

Try like this :

openModal() {
   this.bsModalRef = this.modalService.show(modalComponent, { class: 'modal-lg' });
}

Answer 2

If you want to pass data to modal component while opening modal,

openModal() {
   const initialState = {
     data:"Test data"
   }
   this.bsModalRef = this.modalService.show(modalComponent, {initialState, class: 'modal-lg'});
}