DISCLAIMER

Angular 2 is still in the works. The core concepts are solid, but the API may change. If you find that a code snippet that does not work, please message me, and I will update.

• Bootstrap model size configurable.
• Select cancel/quit key.
• Cascading.
• Element blocking.
• Blocking / Non blocking modal.
• Modal as a component, replace the content by supplying a custom component.

Click for the Demo Click for the auto generated Docs

See src/demo for demo app with examples.

Will try to add documented examples if time allows.

If you encounter a version of the following exception:

EXCEPTION: No provider for XXXXX! (YYYYY -> XXXXX)

Where YYYYY will usually be a directive you've injected to a custom modal component you've built.

This is an error raised by angular core because it can't find a resolved providers for injectable tokens request by the directive/s you want to use within your component. These providers are common runtime objects that angular should know how to fetch, even if not defined. There is a bug opend here angular/angular#4330.

To workaround this issue supply these values in the resolved bindings array sent as a parameter to "open" or "openInside" calls.

let bindings = Injector.resolve([
            provide(IterableDiffers, {useValue: this.injector.get(IterableDiffers)}),
            provide(KeyValueDiffers, {useValue: this.injector.get(KeyValueDiffers)}),
            provide(Renderer, {useValue: this.injector.get(Renderer)})
        ]);
               
let dialog = modal.openInside(..., ..., ..., bindings, ...);

click for example

Another workaround that might work is to supply the resolved providers as part of the bootstrap process. I'm not sure it will work as it depends on the life cycle logic of the injected values which I don't know deeply enough. If you got it to work let me know.

    npm install angular2-modal --save

git clone https://github.com/shlomiassaf/angular2-modal.git  
npm install  
typings install  
webpack-dev-server // development, webpack -p to build.  
browse to localhost:3000  

You can apply custom modals based on components.

Publishing is done using the TypeScript compiler directly (no webpack) The process involves compiling into a directory called dist Webpack is using the build directory. Since I didn't find a way to instruct tsc what config file to use (i.e: a different tsconfig.json) I created a publish directory instead and set the --project argument accordingly.

Not so complicated but not in angular 2 at the moment.

Set webpack do build angular2-module.js as an initial webpack module (currently its not...) This will allow using it as an input for other projects.

Reduce manual DOM interaction, do more usage of host object in @Component. Append child to the DOM using the angular 2 way, if you know tell me.

Currently blocking an element requires it to have an angular template variable placed in one of his children. This is due to the current angular implementation, as I see it. I have yet to find an angular way of inserting a compiled element to a native element/component without effecting it. See issue 6071

Make it fly solo....