1

Could someone guide me in the right direction on how to implement a modal system in angular2 having a lot of modal windows? Right now a modal containing a component to search customers looks something like this:

<modal #searchModal title="Search">
    <search-customer (complete)="searchModal.hide()">
    </search-customer>
</modal>

Basically modal is a simple component fixed on the middle of the screen, I close the modal when the component inside the modal emits an event. On each show() and close() the modal gets a Z-index from a service and applies/removes some styles.

So far the problems are:

  • On pressing Esc I have to close the last opened modal, how can I access that component from the service ? Can I somehow pass a reference to the service on modal.show() ?
  • If an exception occurs in the service, how can I access a modal to show my problem? Have a modal component in the root component of my app(If so, then again I have the first problem, how can I access it from inside the service)?
  • I can easily open and close a modal from template like in the previous example (complete)="searchModal.hide()" but how can I do this from inside the class methods?

Can someone tell me the right way to do this, or how to solve the existing problems ?

Silencer
  • 1,602
  • 4
  • 17
  • 27
  • https://github.com/justindujardin/ng2-material/tree/master/ng2-material/components/dialog, https://github.com/shlomiassaf/angular2-modal, http://stackoverflow.com/questions/34513558/angular-2-0-and-modal-dialog, https://github.com/angular/angular/tree/master/modules/angular2_material/src/components/dialog – Günter Zöchbauer Feb 04 '16 at 09:49
  • 1
    Usually you use a shared service for such tasks with an `EventEmitter` where the modal dialog component listens for commands to execute http://stackoverflow.com/questions/34700438/global-events-in-angular-2, http://stackoverflow.com/questions/34700438/global-events-in-angular-2 – Günter Zöchbauer Feb 04 '16 at 09:53
  • @GünterZöchbauer , thanks for the links, so ngOnChange can help with 3rd problem to show and close modals, EventEmitter in service to call a modal, but what about the implementation, my simple method versus DynamicComponentLoader? Another problem with my implementation is that after reopening the modal, the component inside it will have the same state, the search component for example will have it's fields with text inserted before, is there a component event where I could reset it ? Should I listen for all keydowns, and emit a close event from service with the Z-index of modal to close ? – Silencer Feb 04 '16 at 12:31
  • If you are sitll looking for something, follow this article: http://blog.brecht.io/Modals-in-angular2/ That's a powerfull way to manage modals in your app. – bertrandg Sep 01 '16 at 08:00

0 Answers0