MDB Angular Frame Modal not showing when using modal service

*Expected behavior*Using the modal service, i should be able to launch the modal from another component

*Actual behavior*the modal service seems to get called, the parent component overlay goes gray, but no modal is shown

Resources (screenshots, code snippets etc.)

package.json:

 "dependencies": {
    "@angular/animations": "~7.1.0",
    "@angular/common": "~7.1.0",
    "@angular/compiler": "~7.1.0",
    "@angular/core": "~7.1.0",
    "@angular/forms": "~7.1.0",
    "@angular/platform-browser": "~7.1.0",
    "@angular/platform-browser-dynamic": "~7.1.0",
    "@angular/router": "~7.1.0",
    "@fortawesome/fontawesome-free": "^5.7.2",
    "@types/chart.js": "^2.7.46",
    "chart.js": "^2.5.0",
    "core-js": "^2.5.4",
    "easy-pie-chart": "^2.1.7",
    "hammerjs": "^2.0.8",
    "ng-uikit-pro-standard":  <<REDACTED>>
    "rxjs": "~6.3.3",
    "screenfull": "^3.3.0",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"

angular.json:

"styles": [
              "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
              "node_modules/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss",
              "node_modules/ng-uikit-pro-standard/assets/scss/mdb.scss",
              "src/styles.scss"
            ],
            "scripts": [
              "node_modules/chart.js/dist/Chart.js",
              "node_modules/easy-pie-chart/dist/easypiechart.js",
              "node_modules/screenfull/dist/screenfull.js",
              "node_modules/hammerjs/hammer.min.js"
            ]

App.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

//MDB Kit Mandatory Import
import { MDBBootstrapModulesPro } from 'ng-uikit-pro-standard';
import { CookieModalComponent } from './cookie-modal/cookie-modal.component';

@NgModule({
  declarations: [
    AppComponent,
    CookieModalComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MDBBootstrapModulesPro.forRoot(),
  ],
  entryComponents: [CookieModalComponent],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

App.Component.html:

<button mdbBtn color="primary" (click)="openModal()">Open modal</button>






<!-- Footer -->
<footer class="page-footer font-small blue pt-4 fixed-bottom">

  <!-- Footer Links -->
  <div class="container-fluid text-center text-md-left">

    <!-- Grid row -->
    <div class="row">

      <!-- Grid column -->
      <div class="col-md-6 mt-md-0 mt-3">

        <!-- Content -->
        <h5 class="text-uppercase">K&L Gates, LLP Cloud.</h5>
        <p>Client Collaboration at it's finest</p>

      </div>
      <!-- Grid column -->

      <hr class="clearfix w-100 d-md-none pb-3">

      <!-- Grid column -->
      <div class="col-md-3 mb-md-0 mb-3">



      </div>
      <!-- Grid column -->
      <!-- Grid column -->
      <div class="col-md-3 mb-md-0 mb-3">

        <!-- Links -->
        <h5 class="text-uppercase">Links</h5>

        <ul class="list-unstyled">
          <li>
            <a href="#!">Privacy Policy</a>
          </li>
          <li>
            <a href="#!">Cookie Policy</a>
          </li>
          <li>
            <a href="#!">K&L Gates Terms of Use</a>
          </li>
          <li>
            <a href="#!">HighQ Terms of Use</a>
          </li>
        </ul>

      </div>
      <!-- Grid column -->

    </div>
    <!-- Grid row -->

  </div>
  <!-- Footer Links -->
  <!-- Copyright -->
  <div class="footer-copyright text-center py-3">
    © {{ year }} Copyright:
    <a href="http://www.klgates.com/"> K&L Gates, LLP</a>
  </div>
  <!-- Copyright -->
</footer>
<!-- Footer -->

<router-outlet></router-outlet>

Cookie-Modal Component

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { MDBModalRef } from 'ng-uikit-pro-standard';

@Component({
  selector: 'app-cookie-modal',
  templateUrl: './cookie-modal.component.html',
  styleUrls: ['./cookie-modal.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class CookieModalComponent implements OnInit {

  constructor(public modalRef: MDBModalRef) { }

  ngOnInit() {
  }

}

Cookie-Modal.component.html:

<div mdbModal #basicModal="mdbModal" class="modal fade bottom" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-frame modal-top" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close pull-right" aria-label="Close" (click)="basicModal.hide()">
          <span aria-hidden="true">×</span>
        </button>
        <h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" mdbBtn color="secondary" class="waves-light" aria-label="Close" (click)="basicModal.hide()" mdbWavesEffect>Close</button>
        <button type="button" mdbBtn color="primary" class="relative waves-light" mdbWavesEffect>Save!</button>
      </div>
    </div>
  </div>
</div>