How to pass data to ng-bootstrap modal dialog

Question

I am trying to open model from parent component. So, I got the dummy dialog opened from parent component taking help from : how to pass data to Angular ng-bootstrap modal for binding. On Dialog instead of dummy text , I have input box to display the infomration from parent component and at the same time user can edit this information and require this change to send back to Parent information. I try to do something like Angular Material MAT_DIALOG has using tokeninjection but I am not fully following it.

 import { Component, OnInit, InjectionToken, Injector, OnDestroy, 
  TemplateRef, Inject } from '@angular/core';
  import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';

         export interface CancelDialogData {
            name: string; // this can be any string;
            Comments: string;
         }
        export declare const CUSTOM_DIALOG_DATA: InjectionToken<any>;

          @Component({
           selector: 'app-reject-dialog',
        templateUrl: './reject-dialog.component.html',
           styleUrls: ['./reject-dialog.component.css']
           })
           export class MyDialogComponent implements OnInit {

         constructor(public activeModal: NgbActiveModal,  
       @Inject(CUSTOM_DIALOG_DATA) public data: CancelDialogData) { }

          ngOnInit() {
                 }

              onCancelClick(): void {
                this.activeModal.close();
            }

                }

From parent Component:

     const dialogRef = this.modal.open(CancelDialogComponent, data: 
     {name: '', approverComments: ''});

when I am trying to pass this data , i have compiler error that data is not a NgbModalOptions. I really don't understand the InjectionToken here, it just appear more cleaner than @Input/ @output. Please assist how to achieve it like Active material Dialog.

Eliseo Eliseo · Accepted Answer · 2019-03-28T20:50:39

the docs use:

open() {
    const modalRef = this.modalService.open(NgbdModalContent);
    modalRef.componentInstance.name = 'World';
  }

See that if we use the button "OK" we received in "re" the value, another case (if "cross" button or outside the modal, we received the "value" in "dismiss"

Updated How received a response

If we want received some value from our modal, we use the close function to send the value. e.g. our .html of modal is like

    <div class="modal-header">
      <h4 class="modal-title">Hi there!</h4>
        <!--in function dismiss return a string-->
      <button type="button" class="close" aria-label="Close" 
(click)="activeModal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <p>Hello, <input [(ngModel)]="name">!</p>
    </div>
    <div class="modal-footer">
      <!--but, in function close we return the "name" variable-->
      <button type="button" class="btn btn-outline-dark" (click)="activeModal.close(name)">Aceptar</button>
    </div>

When we make the "open" and received a Modal reference

const modalRef = this.modalService.open(NgbdModalContent)
modalRef.componentInstance.name = 'World';
modalRef.result.then(res=>{
  console.log("CloseButton", res)
},dismiss=>{
  console.log("Cross Button",dismiss)
})

See the example in stackblitz

How to pass data to ng-bootstrap modal dialog

1 Answers