mdb-select (1&2) options in Dynamic Modal bug

Expected behavior

Either mdb-select or mdb-select-2 to render the options when placed inside a dynamic modal

Actual behavior

The options are not visible in the dynamic modal.

Resources (screenshots, code snippets etc.)

html:

        <div class="modal-header">
      <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
        <span aria-hidden="true">×</span>
      </button>
      <h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>
    </div>
    <div class="modal-body">
      <div class="row">
        <div class="col-md-6">
          <div class="md-form">
            <mdb-select-2 placeholder="Choose your option" label="Example label">
              <mdb-select-option *ngFor="let option of options" [value]="option.value">{{ option.label }}</mdb-select-option>
            </mdb-select-2>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6">
          <mdb-select [options]="optionsSelect" placeholder="Choose your option"></mdb-select>
        </div>
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" mdbBtn color="secondary" class="waves-light" aria-label="Close" (click)="modalRef.hide()" mdbWavesEffect>Close</button>
      <button type="button" mdbBtn color="primary" class="relative waves-light" mdbWavesEffect>Save!</button>
    </div>

.ts:

 options = [
{ value: '1', label: 'Option 1' },
{ value: '2', label: 'Option 2' },
{ value: '3', label: 'Option 3' },
];
optionsSelect = [
  { value: '1', label: 'Option 1' },
  { value: '2', label: 'Option 2' },
  { value: '3', label: 'Option 3' },
  ];
 constructor(public modalRef: MDBModalRef) {}

Opening the modal:

          modalRef: MDBModalRef | null = null;

        constructor(private modalService: MDBModalService) {}

        openModal() {
          this.modalRef = this.modalService.show(ModalComponent)
        }