Is your feature request related to a problem? Please describe.

Currently, ModalDialogService is the API to controlling opening the modal. This API is very limited and lacks support for common use cases. For example,

1. There is no obvious way to close the modal from outside of the modal once it's open
2. There is no obvious way to pass data to the modal component after it's rendered.
3. There is no way to control the dialog with state

In fact, the current API doesn't follow common conventions that have been established for working with modals. All of these can be traced back to the imperative API that ModalDialogService exposes.

Describe the solution you'd like

Most of the modern frameworks use a component to represent a modal and allow block template to be used as the content of the modal. Here is what that looks like in React using react-modal

class ExampleApp extends React.Component {
  constructor () {
    super();
    this.state = {
      showModal: false
    };
    
    this.handleOpenModal = this.handleOpenModal.bind(this);
    this.handleCloseModal = this.handleCloseModal.bind(this);
  }
  
  handleOpenModal () {
    this.setState({ showModal: true });
  }
  
  handleCloseModal () {
    this.setState({ showModal: false });
  }
  
  render () {
    return (
      <div>
        <button onClick={this.handleOpenModal}>Trigger Modal</button>
        <ReactModal 
           isOpen={this.state.showModal}
           contentLabel="Minimal Modal Example"
        >
          <button onClick={this.handleCloseModal}>Close Modal</button>
        </ReactModal>
      </div>
    );
  }
}

const props = {};

ReactDOM.render(<ExampleApp {...props} />, document.getElementById('main'))

Here is an example from Vue.js using vue-js-modal

<modal name="hello-world">
  hello, world!
</modal>

Here is another using Ember.js using ember-modal-dialog

{{#modal-dialog}}
  Oh hai there!
{{/modal-dialog}}

Following this pattern would address all of the issues that I enumerated above.

Here is what that would look like in NativeScript Angular.

<ModalDialog *ngIf="modalShowing">
  <Button (tap)="modalShowing = false" text="Close"></Button>
  <Label text="My modal content"><Label>
</ModalDialog>

Describe alternatives you've considered

I've used the current API and struggled to get the control that I needed.

Additional context

I ended up modifying it to work close to how I think it should work. You can see the ModalComponent and modified ModalDialogService.

I can PR what I have, but I would need help figuring out how to get the content block to work.