MDB Angular Frame Modal not showing when using modal service


Topic: 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>

Arkadiusz Idzikowski staff answered 6 years ago

Please take a look at dynamic modal documentation:

https://mdbootstrap.com/docs/angular/modals/basic/#dynamic

You need to remove 2 outer divs from cookie-modal html (the first one should be the one with class 'modal-content, the rest will be generated dynamically).

Then you need to use modal options to apply styles. Classes you would normally add to the second div should be added to 'class' parameter. For example:

modalOptions = {
    class: 'modal-frame modal-top'
}

this.modalRef = this.modalService.show(yourModalName, modalOptions);

JamesR commented 6 years ago

Thank you! this resolved it, the documentation wasn't clear at first to me!


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.4.2
  • Device: Visual Studio 2019
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No