Topic: Cannot get modal to work

declan.ward premium asked 3 years ago


I followed the steps at https://mdbootstrap.com/docs/angular/modals/basic/ without success. Perhaps I am missing something simple :(

The solution offered at https://mdbootstrap.com/support/angular/modal-is-not-wotking/ does not work for me.

Expected behavior Modal should display

Actual behavior Screen greyed out and no modal displays

Resources (screenshots, code snippets etc.)

modal.component.ts

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

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

  constructor(modalRef: MDBModalRef) { }

  ngOnInit() {
  }
}

modal.component.html is copied from Dynamic Modal at: https://mdbootstrap.com/docs/angular/modals/basic/

<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>
<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>
app.component.ts
import { Component } from '@angular/core';

import { MDBModalRef, MDBModalService } from 'ng-uikit-pro-standard';
import { ModalComponent } from './modal/modal.component'

...

  constructor(private modalService: MDBModalService) {}

...

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

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",
              "node_modules/animate.css/animate.css",
              "src/styles.scss"
            ],
            "scripts": [
              "node_modules/chart.js/dist/Chart.js",
              "node_modules/hammerjs/hammer.min.js"
            ]

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MDBBootstrapModulesPro } from 'ng-uikit-pro-standard';
import { MDBSpinningPreloader } from 'ng-uikit-pro-standard';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ModalComponent } from './modal/modal.component';

@NgModule({
  declarations: [
    AppComponent,
    ModalComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MDBBootstrapModulesPro.forRoot()
  ],
  providers: [
    MDBSpinningPreloader
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Bartosz Termena staff answered 3 years ago


Hi!

Just add entryComponents: [ ModalComponent ] to your app.module.ts like below:

import { MDBBootstrapModulesPro } from 'ng-uikit-pro-standard';

import { MDBSpinningPreloader } from 'ng-uikit-pro-standard';
import { ModalComponent } from 'your-path-to-modal-component';

import { NgModule } from '@angular/core';

...

imports: [
    ...
    MDBBootstrapModulesPro.forRoot(),
    ...
],
entryComponents: [ ModalComponent ] <------------------------!
providers: [
...
MDBSpinningPreloader,
...
]

Best Regards, Bartosz.


Arkadiusz Idzikowski staff answered 3 years ago


You can use ModalService to listen to all modal events. We explained how to do that here:

https://mdbootstrap.com/docs/angular/modals/basic/#listen-to-events

In this case you will need closed event.


declan.ward premium commented 3 years ago

Perfect, thank you :)


declan.ward premium answered 3 years ago


One further question - I can subscribe to the action and get the result with:

this.modalRef.content.action.subscribe( (result: any) => { console.log(result); });

However, if the user hits Esc there is no result. How can I get a response from hitting Esc?


declan.ward premium answered 3 years ago


Thank you Bartosa. I just couldn't see my mistake!



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: Premium
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 8.3.0
  • Device: PC
  • Browser: Firefox
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes