How to emit event from dynamically loaded modal to parent

Question

I have a modal that is dynamically created from a component, this way:

@Injectable()
export class SharedService {
  showModal:Subject<any> = new Subject();
}

@Component({
  selector: 'comp-comp',
  template: `MyComponent dataToPass: {{dataToPass}}, dataToPass2: {{dataToPass2}}

            <button (click)="updateData()">Update data</button>`
})
export class CompComponent {
    @Output() setupDataUpdated = new EventEmitter();    
  private dataToPass2;

  constructor() {}

  ngAfterContentInit() {
    this.dataToPass2 = this.dataToPass + ' hello';
  }

  updateData() {
    console.log('data updated');
    this.setupDataUpdated.emit('emitted_value');
  }
}

@Component({
  selector: 'modal-comp',
  template: `
  <div class="modal fade" id="theModal" tabindex="-1" role="dialog" aria-labelledby="theModalLabel">
    <div class="modal-dialog largeWidth" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">{{theHeader}}</h4></div>
        <div class="modal-body" #theBody (setupDataUpdated)="updateSetupData($event)">
      </div>
    <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal" (close)="close()">Close</button>
  </div></div></div></div>
`
})
export class ModalComponent {
  @ViewChild('theBody', {read: ViewContainerRef}) theBody;

  theHeader: string = '';
  dataToPass: string = '';
  cmpRefBody:ComponentRef<any>;

  constructor(
    sharedService:SharedService, 
    private componentFactoryResolver: ComponentFactoryResolver, 
    injector: Injector) {

    sharedService.showModal.subscribe(data => {
      if(this.cmpRef) {
        this.cmpRef.destroy();
      }
      let factory = this.componentFactoryResolver.resolveComponentFactory(data.type);
      this.cmpRef = this.theBody.createComponent(factory);
      this.cmpRef.instance.dataToPass = data.dataToPass;
      this.dataToPass = data.dataToPass;
      this.theHeader = data.title;
      console.log(data.title);
      console.log(data.dataToPass);
      $('#theModal').modal('show');
    });
  }

  close() {
    if(this.cmpRef) {
      this.cmpRef.destroy();
    }
    this.cmpRef = null;
  }

    updateSetupData(data) {
        console.log('update data');
        console.log(data);
    }

}

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello</h2>
      <button (click)="showDialog()">show modal</button>
      <child-component></child-component>
    </div>
  `,
})
export class App {

  constructor(private sharedService:SharedService) {}

  showDialog() {
    this.sharedService.showModal.next({'type': CompComponent, 'title': 'titolo1', 'dataToPass': 'dataToPass'});
  }
}

(referrer: Angular 2 modals shared between components).

As you can see, I was trying to emit an event setupDataUpdated from modal child component, but modal parent component seems not to see the event. Do you know why? Where's my mistake?

Please accept an answer or leave a comment so that this question can be resolved. — isherwood, Jul 13 '17 at 17:41

score 3 · Accepted Answer · answered Jan 13 '17 at 21:29

3

You need to manually subscribe to your EventEmitter as below:

this.cmpRef.instance.setupDataUpdated.subscribe((data) => this.updateSetupData(data));

Modified Plunker

answered Jan 13 '17 at 21:29

yurzui

205,937
32
433
399

This seems like the right approach, but I think it's implemented in reverse. You've added the subscriber to the modal component. It should be in the component that calls the modal, now? Also, Plunker's broken. – isherwood Jul 13 '17 at 18:16
@isherwood Fixed plunker – yurzui Jul 13 '17 at 19:05

How to emit event from dynamically loaded modal to parent

1 Answers1