Ngx-bootstrap: Hold modal logic in a separate component

Created on 24 Aug 2016 · 7Comments · Source: valor-software/ngx-bootstrap

Hi guys,

I'm extensively using the library and I love it! Great tool to build the things fast.

However I really miss the way to modularize the modal dialogs (if I follow the steps described here). The current approach is working, but I don't find it too good to use it everywhere in the app because of the following reasons:

There is no possibility to have a modal over modal. Yes, this might be not the best UX, but sometimes it really saves the day to have a modal which is called from another modal
The modal is created inside of the component, so any overflow: hidden on the parent nodes breaks the layout
There is no possibility to control the dialog flow from the controller side. I can use the @ViewChild decorator to get the directive and use it, but this is not the obvious way...
It is quite not obvious how to reset the modal content. Once the modal content is rendered it is not changed. E.g. I have a form in a dialog, when I fill it and hide the dialog the data is still there => if I open the dialog again the form will have the same value. I solved it with onHide / onShow setting up a boolean flag in combination with *ngIf on modal-body element, but again it is not that clean solution
Finally the HTML template becomes unbelievably big. Just an example: I have a page with 3 different dialogs and each of them takes more space than the original component.

I would really like to have some kind of modal control from the Component side, e.g.

// keep the modal logic and template outside of the consumer component
import { MyModalComponent } from './blabla.component';

@Component(...)
export class MyModalConsumerComponent implements OnInit {

  // modal holder which is created once per consumer component
  private _modal: Modal;

  private _modal_another: Modal;

  public ngOnInit() {
    // create the modal which content is dynamically resolved from MyModalComponent
    this._modal = modalFactory.create(MyModalComponent, ...);
  }

  public ngOnDestroy() {
    this._modal.destroy();
  }

  public buttonclick() {
    this._modal.show();
  }

}

I already have an 80% working solution for all the cases above which reuses the components / services you already have, just extends them. If you find that useful I can prepare a pull request

comp(modal) enhancement

Source