onDismiss and onCancel bindings in a modal dialog using Angular

Question

I have a component that contains a modal.  The template complains that "The event onDismiss is not emitted by any applicable directives nor by app-modal element.

The component code relevant import looks like so:

import {ModalComponent, ModalConfig} from "../../../../_metronic/partials";

I have a ViewChild element on the component:

  @ViewChild('editShuttleReservationModal')
  private editReservationModalComponent: ModalComponent;

As well as an onDismiss: boolean method and a method that I use to call editReservationModalComponent.open()

The opening tag for the modal in my template looks like the below:

<img src="https://i.imgur.com/Bds0u2w.png" />

The (onDismiss) attribute binding gives the error shown and the method is never hit.  I presume that I am missing some import somewhere or something as it is not reading an event for onDismiss (or onCancel) from the bootstrap dialog, but I do not know what I need or where I need it.

Faizal · Answer

Hi, You can check is if you have imported the NgbModalModule in your app.module.ts file. This module provides the NgbModal service that allows you to open and manage modals. You also need to inject this service in your component constructor and use it to open and close modals. For example:

// in your app.module.ts file
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgbModule, ...],
  bootstrap: [AppComponent]
})
export class AppModule {
}

// in your component class
import {NgbModal} from '@ng-bootstrap/ng-bootstrap';

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

  constructor(private modalService: NgbModal) {}

  open(content) {
    this.modalService.open(content).result.then((result) => {
      // This will be executed when the modal is closed with a result
      console.log(`Closed with: ${result}`);
    }, (reason) => {
      // This will be executed when the modal is dismissed with a reason
      console.log(`Dismissed ${this.getDismissReason(reason)}`);
    });
  }

  private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return 'by clicking on a backdrop';
    } else {
      return `with: ${reason}`;
    }
  }
}

You can find more details about this module and service in the post. https://jasonwatmore.com/post/2020/09/24/angular-10-custom-modal-window-dialog-box I hope these suggestions help you fix your modal component. If you have any other questions, please feel free to ask me.

onDismiss and onCancel bindings in a modal dialog using Angular

Replies (1)

Metronic

ReUI

Products

Legal

Stay Connected