request for modal to be launched with a service that is given a component

[kokokenada]

I'd like to define the modal content as a Component and launch it like:

this.modalService.open("my-modal-selector", {input-one: inputOneObject, setting1: 'my setting'});

where this.modalService is created through DI, parameter 1 matches the selector attribute of the Component and parameter 2 provides the component with all of the @input s that it requires.

The implementation of the modal Component can call the same service to close and resolve.

This would allow the modal definitions to be localized to one file or directory.

[shlomiassaf]

Just so I understand better.
You want to create a component on the fly? Send the selector and an object representing a class schema to the modal service?

Well this is problematic in many ways and will not work with offline compilation.

Anyway, it's not the responsibility of the modal library.
To present a component in Angular it is mandatory to create a component type and metadata for that type.

The responsibility of the modal library is to present components, what you want is a something that should be done in a different library and output a Component for you, you would use that component and provide it to the modal library.

It's important to keep things simple and separated, a modal library is not a Component factory....

[kokokenada]

Well, up to you, of course. Here is a proof of concept. https://plnkr.co/edit/Cua6HJYrN3i2SkgC0iLj?p=preview

It think something like this is necessary in order to follow the style guide's (https://angular.io/docs/ts/latest/guide/style-guide.html) requirement of "single responsibility". Otherwise, how do you isolate the modal's implementation from the caller's implementation? How do you call the same modal from multiple locations?

[shlomiassaf]

@kokokenada I don't understand how this differs from the current implementation.

In the current implementation you provide a Component type, which is the same as the example above just with a Type rather then a string literal that is the selector.

This means that the current approach is Type safe, less errors.
You also provide data via a context, same as the 2nd parameter...

The single responsibility principle holds, modal service only show a modal, the UI part of the modal dialog is managed by the component, which can be custom or a user can use a built in one...

Current me if i'm wrong, the only difference is that current approach requires you to import the component's class, your approach does not require it but since it uses a string literal it not type safe.

[kokokenada]

@shlomiassaf - thanks for the reply. Sounds like I misunderstand your API. Can you provide an example? (A button in Component A, should launch a modal defined in Component B)

[raijinsetsu]

I'm working on something I think is similar.
ParentComponent.ts

import {
    Component,
    Input
} from '@angular/core';
import {
    Modal,
    ModalOpenContext,
    BSModalContext
} from 'angular2-modal/plugins/bootstrap';
import {ChildComponent} from '...';

@Component({
    selector: 'parent-component',
    template: `<button (click)="openDialog()">Click Me!</button>`
})
export class ParentComponent {

    constructor(private modal: Modal) {
    }

    openDialog() {
        let context = new BSModalContext();
        context.size = 'lg';
        this.modal.open(ChildComponent, context);
    }
}

Clicking on the button will open the dialog with the ChildComponent within.
What I haven't figured out (I have an issue open for it) is how to bind parameters.