12

I tried below coding for pass data from modal component to parent component.

package.json

"@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.3"

app.component.html

<button class="btn btn-primary" (click)="openModal()">Open</button>

app.component.ts

import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

export class AppComponent {

   constructor(private modalService: NgbModal) { }

    openModal() {
        const modalRef = this.modalService.open(AppModalComponent);
    }
}

app-modal.component.html

<h1>{{data}}</h1>
<button class="btn btn-primary" (click)="addMe()"></button>

app-modal.component.ts

import { Component, Output, EventEmitter } from '@angular/core';

export class AppModalComponent {
    private data: string;
    @Output emitService = new EventEmitter();

    constructor() {
        this.data = "hello world";
    }

    addMe() {
        this.emitService.next(this.data)
    }
}

After emit, how to get data in parent Component (app.component) ??

pkozlowski.opensource
  • 117,202
  • 60
  • 326
  • 286
Chandru
  • 10,864
  • 6
  • 38
  • 53

2 Answers2

18

You could subscribe to the emitService @Output like so:

openModal() {
     const modalRef = this.modalService.open(AppModalComponent);
     modalRef.componentInstance.emitService.subscribe((emmitedValue) => {
         // do sth with emmitedValue
     });
}

While the above will work, please note that it is usually easier to just close modal with the value you want to return. This will resolve a promise available on the modalRef. More details in https://stackoverflow.com/a/43614501/1418796

pkozlowski.opensource
  • 117,202
  • 60
  • 326
  • 286
0

This Line is Wrong @Output emitService = new EventEmitter();

You Must use @Output()

Dinesh Kanivu
  • 2,551
  • 1
  • 23
  • 55