Topic: Cannot get modal to work

Declan Ward priority asked 4 years ago

I followed the steps at without success. Perhaps I am missing something simple :(

The solution offered at does not work for me.

Expected behavior Modal should display

Actual behavior Screen greyed out and no modal displays

Resources (screenshots, code snippets etc.)


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

  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:

<div class="modal-header">
  <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
    <span aria-hidden="true">×</span>
  <h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>
<div class="modal-body">
<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>
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 =


            "styles": [
            "scripts": [


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';

  declarations: [
  imports: [
  providers: [
  bootstrap: [AppComponent]
export class AppModule { }

Bartosz Termena staff answered 4 years ago


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: [
entryComponents: [ ModalComponent ] <------------------------!
providers: [

Best Regards, Bartosz.

Arkadiusz Idzikowski staff answered 4 years ago

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

In this case you will need closed event.

Declan Ward priority commented 4 years ago

Perfect, thank you :)

Declan Ward priority answered 4 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 priority answered 4 years ago

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

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Priority
  • 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