shlomiassaf / ngx-modialog Goto Github PK

View Code? Open in Web Editor NEW

687.0 34.0 241.0 21.3 MB

Modal / Dialog for Angular

Home Page: http://shlomiassaf.github.io/ngx-modialog

License: MIT License

JavaScript 3.31% HTML 11.19% TypeScript 84.47% CSS 1.03%

modal dialog angular

ngx-modialog's Introduction

ngx-modialog (previously `angular2-modal`)

This project is looking for a new maintainer, see #414 for details.

ngx-modialog version 5.x.x works with angular 5.x.x

IMPORTANT - V4 BREAKING CHANGE:

Version 4.x.x contains some breaking changes, please see the CHANGELOG

Library has been renamed from version 3.0.2

Modal / Dialog implementation for angular.

Easy to use API via Fluent API Presets (alert, prompt, confirm)
Can render Component's, TemplateRef's and literal string
Extendable via plugins.
Easy to use

modal.alert()
    .title('Hello World')
    .body('In Angular')
    .open();

Available plugins:

Bootstrap (3 & 4)
Vex 3 & 4

Install

npm install ngx-modialog

Basic plunker playground (bootstrap plugin):

ngx-modialog @ 4.x.x

http://plnkr.co/edit/lV7zsw7Yqossgs9JOfQU?p=preview

ngx-modialog @ 3.x.x

http://plnkr.co/edit/2ppVYl517GI1Byv8vVbG?p=preview

Quick start

In your application root module definition add ModalModule and the plugin you want to use:

We will use the bootstrap plugin (BootstrapModalModule) for this introduction.

import { ModalModule } from 'ngx-modialog';
import { BootstrapModalModule } from 'ngx-modialog/plugins/bootstrap';

// lots of code...

@NgModule({
  bootstrap: [ /* ... */ ],
  declarations: [ /* ... */ ],
  imports: [
    /* ... */
    ModalModule.forRoot(),
    BootstrapModalModule
  ],
})
export class AppModule { /* lots of code... */ }

In any angular component or service inject the Modal service and open a modal:

import { Component, ViewContainerRef } from '@angular/core';
import { Overlay } from 'ngx-modialog';
import { Modal } from 'ngx-modialog/plugins/bootstrap';

@Component({
  selector: 'my-app',
  template: `<button (click)="onClick()">Alert</button>`
})
export class AppComponent {
  constructor(public modal: Modal) { }

  onClick() {
    const dialogRef = this.modal.alert()
        .size('lg')
        .showClose(true)
        .title('A simple Alert style modal window')
        .body(`
            <h4>Alert is a classic (title/body/footer) 1 button modal window that 
            does not block.</h4>
            <b>Configuration:</b>
            <ul>
                <li>Non blocking (click anywhere outside to dismiss)</li>
                <li>Size large</li>
                <li>Dismissed with default keyboard key (ESC)</li>
                <li>Close wth button click</li>
                <li>HTML content</li>
            </ul>`)
        .open();

    dialogRef.result
        .then( result => alert(`The result is: ${result}`) );
  }
}

If you are using ngx-modialog version 3.X.X or below, open() returned a promise so replace the last 2 lines with:

   dialogRef
       .then( dialogRef => {
           dialogRef.result.then( result => alert(`The result is: ${result}`);
       });

We are using the alert() method, one of 3 (prompt, confirm)) fluent-api methods we call drop-ins

We then use the result property to wait for the modal closing event.

Notes:

Fluent API methods (drop-ins) are pre-configured (presets) methods that allow easy configuration and execution, you can create custom presets - see the demo application.
For more control use the open() method, which is used by all drop in's internally.
We import the Modal service from the plugin and not from the root library. Import from the root should work but being explicit allow using multiple plugins.

Demo App

The Demo application is a full implementation of the library with the native plugins.

View it at shlomiassaf.github.io/ngx-modialog

The demo application is part of this repository and it is a great place to learn by example.

Bootstrap / VEX features:

Customizable with components, Presets and more...
Select cancel/quit key.
Cascading modals.
Element blocking.
Blocking / Non blocking modal.
Modal as a component, replace the content by supplying a custom component.

The demo application comes with a dynamic modal generator for the Boostrap plugin

Plugins

Plugins serve as a concrete UI implementation for a modal.

It can be an implementation for a known library (e.g: bootstrap) or something completely unique

While ngx-modialog has some built in plugins it is also possible to use external plugins from NPM, if someone decide to build one.

Built a plugin? I would love to know :)

Known bugs

The dialog closes when removing the target DOM element in a click event

ref issue#111

To avoid this problem use event.stopPropagation(); or put the element removal inside a setTimeout call

HELP WANTED!

As a sole author I find it difficult to maintain multiple open source projects. As a result it is hard for me to replay rapidly to requests/help/etc...

If you would like to contribute, please contact me, the community will thank you.

You can contribute via:

Implementing features & Bug fixes
Documentation (Extremely important)
Issue management

Thank you!

Shlomi.

ngx-modialog's People

Contributors

Stargazers

Watchers

Forkers

ibhi tjercus rushimusmaximus tazaka jensworkgit mpgoodman kirtikathpal bertvh akonev mangzak akserg mbalex99 yubinz yannvr adrientorris flea505 randyaa bpervan nickthakkar rahulvramesh fourtwoapp moeslami effyma nabeel-khan paruldixit nicolascayet parol-peter nexus-uw drdjermanovic jdelgadoalfonso sirajatdps jing1002zhang vevedh admirkb wor-k vklidu dahomost jackwachira timmybeef etlaser hotforfeature benson-xu swilliams nancyhebert2015 augusteen mehulatl toktik nathane2005 anand024 yeyus karencummings jwfong juncoding beckmeindia frankfqchen daivinhtran davidmarquis slals notsaltydev dleroux lerakruchek nubs bbegouin daonhan webartistkb xuxji benjamindobler encool jan-zajic roche-emmanuel trickyil2000 odi55555 algotec happyjunyi herwix zxshinxz yodamad isaacplmann pk-karthik pk-codebox-evo iamchucky qdubious severinkehding crivents mheir haswello doyevaristo six006 sp01010011 nekken stevestrong mm1234567890 chaosxu mustafayasser mitko86 davidkim310 kesuskim trimechmh florencepe xwang-workspace

ngx-modialog's Issues

Pass data to custom modal

Hi. What is the best way to pass some data to custom modal window? For example I want to pass some text and show it in textarea on the window. I don't see it on README. Thanks

Allow adding custom classes on modal-dialog

This would allow custom styling and positioning of modals.

The custom classes could be enabled through the ModalConfig with classes: string property and by adding [ngClass]="dialogInstance.config.classes || ''" to the BootstrapModalContainer template.

This would make modal alignment as mentioned in #29 easy to do with a little css.

DI exception when demo component recreated as service

When I move demoPage component code into service, DI fix doesn't work anymore. I get
EXCEPTION: No provider for Modal! (Dashboard-> ModalService -> Modal)

Code is the same just instead of component I've put:

@Injectable()
export class ModalService {

Bootstrapped this service along with dozen others which work without problems.

I'm not sure how ResolvedBinding patch works, maybe I need to move bindings one level up, to the component which calls service?

A lot of 'ERROR TS2300' when setting up webpack server

I try to import angular2-model objects in my project using following code

import {Component, provide, ElementRef, Injector, IterableDiffers, KeyValueDiffers, Renderer} from 'angular2/core';

import {ModalDialogInstance} from '../../node_modules/angular2-modal/dist/models/ModalDialogInstance';
import {ModalConfig} from '../../node_modules/angular2-modal/dist/models/ModalConfig';
import {Modal} from '../../node_modules/angular2-modal/dist/providers/Modal';
import {ICustomModal} from '../../node_modules/angular2-modal/dist/models/ICustomModal';

import {YesNoModalContent, YesNoModal} from '../../node_modules/angular2-modal/dist/commonModals/yesNoModal';
import {OKOnlyContent, OKOnlyModal} from '../../node_modules/angular2-modal/dist/commonModals/okOnlyModal';

However, when I run webpack-dev-server, I get many 'ERROR TS2300'. Just take some as examples:

    ERROR in /home/mypc/Documents/Projects/angular2-leaflet-starter/node_modules/angular2/manual_typings/globals-es6.d.ts
    (34,3): error TS2300: Duplicate identifier 'clearTimeout'.

    ERROR in /home/mypc/Documents/Projects/angular2-leaflet-starter/node_modules/angular2/manual_typings/globals-es6.d.ts
    (35,3): error TS2300: Duplicate identifier 'setInterval'.

    ERROR in /home/mypc/Documents/Projects/angular2-leaflet-starter/node_modules/angular2/manual_typings/globals-es6.d.ts
    (36,3): error TS2300: Duplicate identifier 'clearInterval'.

I use ts-loader to handle all typescript files and my webpack config is here.

When I remove all imports, everything works fine. I am currently using angular 2.0.0 beta.1, is that the reason?

Cleaner API for content

Hello,

Thank you for this modal, it is very neat!

I just think it is kind of too dirty to have to get a Injector and provide and useValue and all of this when all I want is to provide the modal with its content, would it be possible to provide easier API for that where we just provide the content?

Thank you!

Modal closing when clicking anywhere on form.

Any click inside modal frame closes a modal - this is not right. Need a way to disable it (blocking mode is a way around)

Also there is a lot of TSLint "errors" in sources and npm ready package is really welcome

Thanks for your work!

Incompatible with Beta 13

Beta 13 is running [email protected], but modal want [email protected]
Would it be possible to upgrade this dependency?

error TS1110: Type expected.

after updating to 0.1.3 I received this error during build:

angular2-modal/dist/commonjs/models/ModalConfig.d.ts(1,42): error TS1110: Type expected.

even though modal still work find.

Typo in Demo

In the simplest issue to resolve of the day category...

Title of the Demo page is:
Angular 2 (beta) Bootstarp Modal/Dialog

s/Bootstarp/Bootstrap/

Thanks for the package, it just what I need

Cannot resolve module 'angular2-modal'

ERROR in ./client/main.ts
Module build failed: Error: Cannot resolve module 'angular2-modal' in ...
Required in ./client/main.ts

html as content input

Is it possible to use html like <strong>Title</strong> as the title/content input for common modal content classes (OKOnlyContent, YesNoModalContent, etc.)?

Integration angular2-modal in hybrid app (Angular1 + Angular2)

In a hybrid setup where Angular1 and Angular2 are both present, modal dialog service does not work. It fails to locate the root element (Angular2) reference, as none exists.

This is the culprit line in modal.ts

let elementRef: ElementRef = (<any>this.appRef)._rootComponents[0].location;

The workaround that i have used it to create a Angular2 component that encompasses the complete Angular1 app and store its reference in a global export.

While this approach works with standard modal dialog, it fails to work with custom dialog component as it does not take a parameter. to specify ElementRef to attach the dialog to.

I have extended the open method in modal.ts for the time being to make custom modal dialog work.

public open(componentType: FunctionConstructor, bindings: ResolvedProvider[],
                config?: ModalConfig, **inside?: ElementRef**): Promise<ModalDialogInstance> {
        // TODO: appRef.injector.get(APP_COMPONENT) Doesn't work.
        // When it does replace with the hack below.
        //let myElementRef = this.appRef.injector.get(APP_COMPONENT).location;
       **let elementRef: ElementRef = inside || (<any>this.appRef)._rootComponents[0].location;**

        return this.openInside(componentType, elementRef, null, bindings, config);
    }

Is this the right approach, or can someone suggest a better method to integrate angular2-modal in a hybrid app.

Modal creation?

I have an error in console:

TypeError: Cannot read property 'location' of undefined
at Modal.open (Modal.ts:46)

I don't see usages of private elementRef: ElementRef, injector: Injector, private _renderer: Renderer, so I skipped them.
WHen I tried to add, Angular asked me to add some providers. When I add all, error is the same.

Modal in constructor has 3 parameters. But anywhere in your code you don't create it manually.
46 line is:
let elementRef: ElementRef = this.appRef['_rootComponents'][0].location;

So appRef is undefined. And it is one of constructor parameters.

What I am doing wrong or it is a bug? I use beta12.

Dart port available

Very useful library! But because I'm using Dart instead of Typescript for Angular2, I've made a port to Dart which can be found here: https://github.com/laagland/ng2-dart-modal. It uses the same code and demo site, but rewritten to Dart.

Best,
Louis

Package the ts files in dist.

I installed via npm. The dist dir contains js, d.ts and .map files. However, not the original ts sources. Chrome doesn't allow you to set a breakpoint on the js directly if there is a mapping file present. It switches to the (non-existing) ts file.

Could you add them?

TypeError: this.appRef._rootComponents[0] is undefined in [null]

I tried to create a service that showed an ok-only modal window, but it failed to open the window. The error occurred at the open() method:

TypeError: this.appRef._rootComponents[0] is undefined in [null]

code of the service:

import {Injectable, Injector, provide, IterableDiffers, KeyValueDiffers, Renderer} from 'angular2/core';
import {ModalConfig, Modal, ICustomModal, OKOnlyContent, OKOnlyModal} from '../../node_modules/angular2-modal/dist/angular2-modal';

@Injectable()
export class ModalService {
    aboutConfig: ModalConfig;
    aboutContent: OKOnlyContent;

    constructor(private modal: Modal, private injector: Injector, private renderer: Renderer) {
        this.aboutConfig = new ModalConfig('lg', false, 27);
        this.aboutContent = new OKOnlyContent();
    }

    showAbout() {
        let bindings = Injector.resolve([
            provide(ICustomModal, { useValue: this.aboutContent }),
            provide(IterableDiffers, {useValue: this.injector.get(IterableDiffers)}),
            provide(KeyValueDiffers, {useValue: this.injector.get(KeyValueDiffers)}),
            provide(Renderer, {useValue: this.renderer})
        ]);

        this.modal.open(<any>OKOnlyModal, bindings, this.aboutConfig);
    }
};

I followed the demo to write this service, but I was not sure whether I created the config correctly. Thanks for any help.

Publish at npm

The modal window is awesome. Could it be published at npm?

Modal align

Hi, it's possible to aligner the modal at the center of the screen? When we have a scroll down and open the modal we can't see the modal so we have to scroll up every time we open the modal.
Thanks

Use the package without dependencies (e.g. webpack, require)

Is there a way to use the package without webpack and require and all other libraries dependencies?
When installing the package through npm, it imports everything on your repository, including the node_modules folder you've used.
You haven't provided an example for using the package through the angular2_modal only.

modal is on the left

i upgraded from 0.0.4 to the latest version. Now my modal is aligned to the left.

how do i fix this?

escape key closes all modals

It should only close the topmost one.

I thought of calling event.stopImmediatePropagation() in the documentKeypress method in BootstrapModalContainer, but unfortunately that causes the modals to be closed in reverse order.

I guess the only solution is to put the keydown listener on the modal itself, not the document body? Or else do a single body keydown listener and iterate the open modals somehow?

Can not use NgClass in a modal window

When you create a dialog and use ngClass in the template the following error is shown in the browser console: EXCEPTION: No provider for IterableDiffers! (NgClass -> IterableDiffers)

My component looks likes:

import {Component} from "angular2/core";
import {CORE_DIRECTIVES} from "angular2/common";
import {ModalDialogInstance} from '../models/ModalDialogInstance';

@Component({
    selector: "modal-content",
    directives: [CORE_DIRECTIVES],
    template: `<div [ngClass]="{'myclass' : shouldUseMyClass}">hello</div>`
})
export class MyDialogComponent implements ICustomModalComponent
{
     public shouldUseMyClass: boolean=true;
     dialog: ModalDialogInstance;

    constructor(dialog: ModalDialogInstance, modelContentData: ICustomModal) {
       ...
   }
}

popover style modal support

Hi, just wander is it possible to create a modal like this style http://v4-alpha.getbootstrap.com/components/popovers/ ?

The thing is I need to put template in a popover rather than text.

Miss index aggregating modules

import * as modal from 'angular2-modal'; // ts error: can't resolve

should add a index.ts aggregating module in the package

[packages_folder]/angular2-modal/index.ts

export * from './src/components/angular2-modal/index';

tsconfig of the library messes my tsconfig

Hello,

When I install the library using npm, it comes with its tsconfig, which as soon as my ts compiler sees, it goes crazy, and I have to delete it, and restart the compiler in order for it to work.

Could we maybe remove the tsconfig from next versions, and let the user of the library use his/her own tsconfig?

Thank you

Uncaught SyntaxError: Unexpected token < when importing Modal

Hi, I'm starting from a simple quick start angular 2 project and I installed angular2-modal via npm

npm install angular2-modal --save

And now I have

angular2-modal/
- dist/
- docs/
- src/
- ...

in my node_modules folder.
As soon as I import Modal in one of my component and add it to the providers array, I get an error

Uncaught SyntaxError: Unexpected token <
Evaluating http://localhost:3000/angular2-modal/src/components/angular2-modal/providers/Modal
Error loading http://localhost:3000/app/main.js

This is the component:

import {Component} from 'angular2/core';
import {Modal} from 'angular2-modal/src/components/angular2-modal/providers/Modal';

@Component({
    selector: 'my-app',
    template: `        
            <h1>My First Angular 2 App</h1>
            <button (click)="test()">Test</button>
    `,
    providers: [Modal],
})
export class AppComponent {
    constructor() {}

    test() {
        //here I want to open a modal
    }
}

I'm sure that I'm missing something, but don't know what

error

my angular2 version is ^2.0.0-beta.12.

EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property 'addClass' of null
angular2.dev.js:23730 EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property 'addClass' of nullBrowserDomAdapter.logError @ angular2.dev.js:23730BrowserDomAdapter.logGroup @ angular2.dev.js:23741ExceptionHandler.call @ angular2.dev.js:1292(anonymous function) @ angular2.dev.js:12674schedulerFn @ angular2.dev.js:13078SafeSubscriber.__tryOrUnsub @ Rx.js:10721SafeSubscriber.next @ Rx.js:10676Subscriber._next @ Rx.js:10636Subscriber.next @ Rx.js:10613Subject._finalNext @ Rx.js:11237Subject._next @ Rx.js:11229Subject.next @ Rx.js:11188EventEmitter.emit @ angular2.dev.js:13059NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ angular2.dev.js:13477NgZoneImpl.inner.inner.fork.onHandleError @ angular2.dev.js:2233ZoneDelegate.handleError @ angular2-polyfills.js:336Zone.runGuarded @ angular2-polyfills.js:244drainMicroTaskQueue @ angular2-polyfills.js:495ZoneTask.invoke @ angular2-polyfills.js:434
angular2.dev.js:23730 STACKTRACE:BrowserDomAdapter.logError @ angular2.dev.js:23730ExceptionHandler.call @ angular2.dev.js:1294(anonymous function) @ angular2.dev.js:12674schedulerFn @ angular2.dev.js:13078SafeSubscriber.__tryOrUnsub @ Rx.js:10721SafeSubscriber.next @ Rx.js:10676Subscriber._next @ Rx.js:10636Subscriber.next @ Rx.js:10613Subject._finalNext @ Rx.js:11237Subject._next @ Rx.js:11229Subject.next @ Rx.js:11188EventEmitter.emit @ angular2.dev.js:13059NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ angular2.dev.js:13477NgZoneImpl.inner.inner.fork.onHandleError @ angular2.dev.js:2233ZoneDelegate.handleError @ angular2-polyfills.js:336Zone.runGuarded @ angular2-polyfills.js:244drainMicroTaskQueue @ angular2-polyfills.js:495ZoneTask.invoke @ angular2-polyfills.js:434
angular2.dev.js:23730 Error: Uncaught (in promise): TypeError: Cannot read property 'addClass' of null
at resolvePromise (angular2-polyfills.js:543)
at resolvePromise (angular2-polyfills.js:528)
at angular2-polyfills.js:576
at ZoneDelegate.invokeTask (angular2-polyfills.js:365)
at Object.NgZoneImpl.inner.inner.fork.onInvokeTask (angular2.dev.js:2208)
at ZoneDelegate.invokeTask (angular2-polyfills.js:364)
at Zone.runTask (angular2-polyfills.js:263)
at drainMicroTaskQueue (angular2-polyfills.js:482)
at HTMLButtonElement.ZoneTask.invoke (angular2-polyfills.js:434)BrowserDomAdapter.logError @ angular2.dev.js:23730ExceptionHandler.call @ angular2.dev.js:1295(anonymous function) @ angular2.dev.js:12674schedulerFn @ angular2.dev.js:13078SafeSubscriber.__tryOrUnsub @ Rx.js:10721SafeSubscriber.next @ Rx.js:10676Subscriber._next @ Rx.js:10636Subscriber.next @ Rx.js:10613Subject._finalNext @ Rx.js:11237Subject._next @ Rx.js:11229Subject.next @ Rx.js:11188EventEmitter.emit @ angular2.dev.js:13059NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ angular2.dev.js:13477NgZoneImpl.inner.inner.fork.onHandleError @ angular2.dev.js:2233ZoneDelegate.handleError @ angular2-polyfills.js:336Zone.runGuarded @ angular2-polyfills.js:244drainMicroTaskQueue @ angular2-polyfills.js:495ZoneTask.invoke @ angular2-polyfills.js:434
angular2-polyfills.js:469 Unhandled Promise rejection: Cannot read property 'addClass' of null ; Zone: angular ; Task: Promise.then ; Value: TypeError: Cannot read property 'addClass' of null(…)consoleError @ angular2-polyfills.js:469drainMicroTaskQueue @ angular2-polyfills.js:498ZoneTask.invoke @ angular2-polyfills.js:434
angular2-polyfills.js:471 Error: Uncaught (in promise): TypeError: Cannot read property 'addClass' of null(…)

Modal isn't popped if parent component is destroyed

This matters to me because I actually do want (despite your TODO comment) the modal-open class to be added to the body even for modals opened inside other elements. So for me the modal-open class was getting stuck on as soon as I navigated away from a component with an open modal.

I worked around this by overriding ngOnDestroy in BootstrapModalContainer, ensuring that the dialog instance is removed from the stack. So in most cases it's actually being 'removed' twice, but that's ok. I think this makes more sense than rejecting the dialog instance's promise (the dialog instance and its promise should be considered garbage by this point), but I don't know if it's the best solution.

Missing scroll behavior for long modal

With original bootstrap modal, when we open a modal, a class modal-open is added on body tag to add a overflow: hidden; and mask main scrollbar.
And a overflow-y: auto; rule is (automatically due to css rule) added on the .modal-open .modal element to allow scroll to the bottom of the modal when needed.

Thanks for your lib, it's a really needed one.

Porting to ng2 0.46

Any ideas? Unfortunately, many of the APIs you use are not available anymore. Due to lack of documentation, I haven't been able to figure out how I can port this component.

Seems to break when using Angular 2 beta 12

Hi,

angular2-modal currently seems to break when Angular 2 beta 12 is used.

A commit where I'm using it: thinktecture/boardz-cross-platform-sample@d1f0a24

I just injected the Modal provider, then the error happens:

angular2.min.js:42489 EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property 'toString' of undefined
2016-03-24 22:57:07.914 angular2.min.js:475 Unhandled Promise rejection: Cannot read property 'toString' of undefined ; Zone: angular ; Task: Promise.then ; Value: TypeError: Cannot read property 'toString' of undefined(…)consoleError @ angular2.min.js:475drainMicroTaskQueue @ angular2.min.js:504ZoneTask.invoke @ angular2.min.js:440XMLHttpRequest.send (async)XHRImpl.get @ angular2.min.js:39834TemplateNormalizer.normalizeTemplate @ angular2.min.js:39096TemplateCompiler.normalizeDirectiveMetadata @ angular2.min.js:43650(anonymous function) @ angular2.min.js:43724TemplateCompiler._compileComponentRuntime @ angular2.min.js:43723TemplateCompiler._compileNestedComponentRuntime @ angular2.min.js:43751(anonymous function) @ angular2.min.js:43732(anonymous function) @ angular2.min.js:43731ZoneDelegate.invoke @ angular2.min.js:338NgZoneImpl.inner.inner.fork.onInvoke @ angular2.min.js:20965ZoneDelegate.invoke @ angular2.min.js:337Zone.run @ angular2.min.js:233(anonymous function) @ angular2.min.js:582ZoneDelegate.invokeTask @ angular2.min.js:371NgZoneImpl.inner.inner.fork.onInvokeTask @ angular2.min.js:20957ZoneDelegate.invokeTask @ angular2.min.js:370Zone.runTask @ angular2.min.js:269drainMicroTaskQueue @ angular2.min.js:488ZoneTask.invoke @ angular2.min.js:440XMLHttpRequest.send (async)XHRImpl.get @ angular2.min.js:39834TemplateNormalizer.normalizeTemplate @ angular2.min.js:39096TemplateCompiler.normalizeDirectiveMetadata @ angular2.min.js:43650(anonymous function) @ angular2.min.js:43724TemplateCompiler._compileComponentRuntime @ angular2.min.js:43723TemplateCompiler.compileHostComponentRuntime @ angular2.min.js:43677RuntimeCompiler_.compileInHost @ angular2.min.js:44028DynamicComponentLoader_.loadNextToLocation @ angular2.min.js:31166RouterOutlet.activate @ angular2.min.js:47469(anonymous function) @ angular2.min.js:48439ZoneDelegate.invoke @ angular2.min.js:338NgZoneImpl.inner.inner.fork.onInvoke @ angular2.min.js:20965ZoneDelegate.invoke @ angular2.min.js:337Zone.run @ angular2.min.js:233(anonymous function) @ angular2.min.js:582ZoneDelegate.invokeTask @ angular2.min.js:371NgZoneImpl.inner.inner.fork.onInvokeTask @ angular2.min.js:20957ZoneDelegate.invokeTask @ angular2.min.js:370Zone.runTask @ angular2.min.js:269drainMicroTaskQueue @ angular2.min.js:488ZoneTask.invoke @ angular2.min.js:440XMLHttpRequest.send (async)XHRImpl.get @ angular2.min.js:39834TemplateNormalizer.normalizeTemplate @ angular2.min.js:39096TemplateCompiler.normalizeDirectiveMetadata @ angular2.min.js:43650(anonymous function) @ angular2.min.js:43724TemplateCompiler._compileComponentRuntime @ angular2.min.js:43723TemplateCompiler.compileHostComponentRuntime @ angular2.min.js:43677RuntimeCompiler_.compileInHost @ angular2.min.js:44028DynamicComponentLoader_.loadNextToLocation @ angular2.min.js:31166RouterOutlet.activate @ angular2.min.js:47469(anonymous function) @ angular2.min.js:48439ZoneDelegate.invoke @ angular2.min.js:338NgZoneImpl.inner.inner.fork.onInvoke @ angular2.min.js:20965ZoneDelegate.invoke @ angular2.min.js:337Zone.run @ angular2.min.js:233(anonymous function) @ angular2.min.js:582ZoneDelegate.invokeTask @ angular2.min.js:371NgZoneImpl.inner.inner.fork.onInvokeTask @ angular2.min.js:20957ZoneDelegate.invokeTask @ angular2.min.js:370Zone.runTask @ angular2.min.js:269drainMicroTaskQueue @ angular2.min.js:488ZoneTask.invoke @ angular2.min.js:440XMLHttpRequest.send (async)XHRImpl.get @ angular2.min.js:39834TemplateNormalizer.normalizeTemplate @ angular2.min.js:39096TemplateCompiler.normalizeDirectiveMetadata @ angular2.min.js:43650(anonymous function) @ angular2.min.js:43724TemplateCompiler._compileComponentRuntime @ angular2.min.js:43723TemplateCompiler._compileNestedComponentRuntime @ angular2.min.js:43751(anonymous function) @ angular2.min.js:43732(anonymous function) @ angular2.min.js:43731ZoneDelegate.invoke @ angular2.min.js:338NgZoneImpl.inner.inner.fork.onInvoke @ angular2.min.js:20965ZoneDelegate.invoke @ angular2.min.js:337Zone.run @ angular2.min.js:233(anonymous function) @ angular2.min.js:582ZoneDelegate.invokeTask @ angular2.min.js:371NgZoneImpl.inner.inner.fork.onInvokeTask @ angular2.min.js:20957ZoneDelegate.invokeTask @ angular2.min.js:370Zone.runTask @ angular2.min.js:269drainMicroTaskQueue @ angular2.min.js:488ZoneTask.invoke @ angular2.min.js:440

typescript can't find module

After installing via NPM TypeScript compiler complains that it can't find "angular2-modal" module though modals work fine (systemjs dist js included in my index.html).
after taking a look into angular's package and TS NPM compatibility section I think that some files are missing in your lib eg:
there is node_modules/angular2/core.js and node_modules/angular2/core.d.ts that registers 'angular2/core' module so module name is reflecting package file path. TS resolves "global modules" like this "package/file" => "node_modules/package/file(.d).ts".

The problem is that TS compiler doesn't know where to look for "angular2-modal" module.

Of course I dont want to compile angular2-modal.ts into my app. I belive contents of this file should be in angular2-modal.d.ts plus compiled file angular2-modal.js. Then TSC would easily locate it by module name "angular2-modal/angular2-modal". Your module name should contain slash I reckon.

Best regards

how to open a new modal, from inside a custom modal

is there a way to trigger an event from with in a custom modal?

thanks,

Consider returning Observable instead of Promise

Since most asyc-related methods in Angular 2 return or work with Observables, you might consider having Modal return an Observable instead of a Promise (for consistency)?

Pass callback for Ok button

Is it possible to pass a callback somehow?

this.modal.confirm()
            .size('sm')
            .isBlocking(true)
            .keyboard(27)
            .title('Create application')
            .body(`<label>Name</label>
                       <input class="form-control" type="text" #answer autofocus>`
             )
            .okBtn('Save')

            // Something like this....
            .onOkClicked(function() {
                   // Get value and reject or close...
            })
            .cancelBtn('Cancel')
            .open();

[qustion] How to programmatically dismiss or close a modal

I am trying to find a way to dismiss programmatically a modal.

I can't find exposed methods (such as close() or dismiss() ) to achieve this objective in the code.

Am I missing something ?

Errors while compiling. App updated with errors. No reload!

webpack -v
ts-loader: Using [email protected] and /var/www/dev/angular2-modal/tsconfig.json

Errors while compiling. App updated with errors. No reload!

/var/www/dev/angular2-modal/node_modules/angular2/src/http/http.d.ts
(5,28): error TS2307: Cannot find module 'rxjs/Observable'.

/var/www/dev/angular2-modal/node_modules/angular2/src/http/backends/jsonp_backend.d.ts
(7,28): error TS2307: Cannot find module 'rxjs/Observable'.

/var/www/dev/angular2-modal/node_modules/angular2/src/http/backends/xhr_backend.d.ts
(7,28): error TS2307: Cannot find module 'rxjs/Observable'.

/var/www/dev/angular2-modal/node_modules/angular2/src/facade/async.d.ts
(3,28): error TS2307: Cannot find module 'rxjs/Observable'.

/var/www/dev/angular2-modal/node_modules/angular2/src/facade/async.d.ts
(4,25): error TS2307: Cannot find module 'rxjs/Subject'.

/var/www/dev/angular2-modal/node_modules/angular2/src/facade/async.d.ts
(5,28): error TS2307: Cannot find module 'rxjs/Observable'.

/var/www/dev/angular2-modal/node_modules/angular2/src/facade/async.d.ts
(6,25): error TS2307: Cannot find module 'rxjs/Subject'.

multi main
Module not found: Error: Cannot resolve module 'development,' in /var/www/dev/angular2-modal
resolve module development, in /var/www/dev/angular2-modal
looking for modules in /var/www/dev/angular2-modal/node_modules
resolve 'file' development, in /var/www/dev/angular2-modal/node_modules
resolve file
/var/www/dev/angular2-modal/node_modules/development, doesn't exist
/var/www/dev/angular2-modal/node_modules/development,.ts doesn't exist
/var/www/dev/angular2-modal/node_modules/development,.js doesn't exist
/var/www/dev/angular2-modal/node_modules/development,.json doesn't exist
/var/www/dev/angular2-modal/node_modules/development,.css doesn't exist
/var/www/dev/angular2-modal/node_modules/development,.html doesn't exist
/var/www/dev/angular2-modal/node_modules/development, doesn't exist (module as directory)
[/var/www/dev/angular2-modal/node_modules/development,]
[/var/www/dev/angular2-modal/node_modules/development,.ts]
[/var/www/dev/angular2-modal/node_modules/development,.js]
[/var/www/dev/angular2-modal/node_modules/development,.json]
[/var/www/dev/angular2-modal/node_modules/development,.css]
[/var/www/dev/angular2-modal/node_modules/development,.html]
[/var/www/dev/angular2-modal/node_modules/development,]
@ multi main

multi main
Module not found: Error: Cannot resolve module 'to' in /var/www/dev/angular2-modal
resolve module to in /var/www/dev/angular2-modal
looking for modules in /var/www/dev/angular2-modal/node_modules
resolve 'file' to in /var/www/dev/angular2-modal/node_modules
resolve file
/var/www/dev/angular2-modal/node_modules/to doesn't exist
/var/www/dev/angular2-modal/node_modules/to.ts doesn't exist
/var/www/dev/angular2-modal/node_modules/to.js doesn't exist
/var/www/dev/angular2-modal/node_modules/to.json doesn't exist
/var/www/dev/angular2-modal/node_modules/to.css doesn't exist
/var/www/dev/angular2-modal/node_modules/to.html doesn't exist
/var/www/dev/angular2-modal/node_modules/to doesn't exist (module as directory)
[/var/www/dev/angular2-modal/node_modules/to]
[/var/www/dev/angular2-modal/node_modules/to.ts]
[/var/www/dev/angular2-modal/node_modules/to.js]
[/var/www/dev/angular2-modal/node_modules/to.json]
[/var/www/dev/angular2-modal/node_modules/to.css]
[/var/www/dev/angular2-modal/node_modules/to.html]
[/var/www/dev/angular2-modal/node_modules/to]
@ multi main

multi main
Module not found: Error: Cannot resolve module 'build.' in /var/www/dev/angular2-modal
resolve module build. in /var/www/dev/angular2-modal
looking for modules in /var/www/dev/angular2-modal/node_modules
resolve 'file' build. in /var/www/dev/angular2-modal/node_modules
resolve file
/var/www/dev/angular2-modal/node_modules/build. doesn't exist
/var/www/dev/angular2-modal/node_modules/build..ts doesn't exist
/var/www/dev/angular2-modal/node_modules/build..js doesn't exist
/var/www/dev/angular2-modal/node_modules/build..json doesn't exist
/var/www/dev/angular2-modal/node_modules/build..css doesn't exist
/var/www/dev/angular2-modal/node_modules/build..html doesn't exist
/var/www/dev/angular2-modal/node_modules/build. doesn't exist (module as directory)
[/var/www/dev/angular2-modal/node_modules/build.]
[/var/www/dev/angular2-modal/node_modules/build..ts]
[/var/www/dev/angular2-modal/node_modules/build..js]
[/var/www/dev/angular2-modal/node_modules/build..json]
[/var/www/dev/angular2-modal/node_modules/build..css]
[/var/www/dev/angular2-modal/node_modules/build..html]
[/var/www/dev/angular2-modal/node_modules/build.]
@ multi main

.//angular2/src/facade/async.js
Module not found: Error: Cannot resolve module 'rxjs/Subject' in /var/www/dev/angular2-modal/node_modules/angular2/src/facade
resolve module rxjs/Subject in /var/www/dev/angular2-modal/node_modules/angular2/src/facade
looking for modules in /var/www/dev/angular2-modal/node_modules
/var/www/dev/angular2-modal/node_modules/rxjs doesn't exist (module as directory)
[/var/www/dev/angular2-modal/node_modules/rxjs]
@ .//angular2/src/facade/async.js 10:16-39 15:16-39

.//angular2/src/facade/async.js
Module not found: Error: Cannot resolve module 'rxjs/observable/fromPromise' in /var/www/dev/angular2-modal/node_modules/angular2/src/facade
resolve module rxjs/observable/fromPromise in /var/www/dev/angular2-modal/node_modules/angular2/src/facade
looking for modules in /var/www/dev/angular2-modal/node_modules
/var/www/dev/angular2-modal/node_modules/rxjs doesn't exist (module as directory)
[/var/www/dev/angular2-modal/node_modules/rxjs]
@ .//angular2/src/facade/async.js 11:20-58

.//angular2/src/facade/async.js
Module not found: Error: Cannot resolve module 'rxjs/operator/toPromise' in /var/www/dev/angular2-modal/node_modules/angular2/src/facade
resolve module rxjs/operator/toPromise in /var/www/dev/angular2-modal/node_modules/angular2/src/facade
looking for modules in /var/www/dev/angular2-modal/node_modules
/var/www/dev/angular2-modal/node_modules/rxjs doesn't exist (module as directory)
[/var/www/dev/angular2-modal/node_modules/rxjs]
@ .//angular2/src/facade/async.js 12:18-52

.//angular2/src/facade/async.js
Module not found: Error: Cannot resolve module 'rxjs/Observable' in /var/www/dev/angular2-modal/node_modules/angular2/src/facade
resolve module rxjs/Observable in /var/www/dev/angular2-modal/node_modules/angular2/src/facade
looking for modules in /var/www/dev/angular2-modal/node_modules
/var/www/dev/angular2-modal/node_modules/rxjs doesn't exist (module as directory)
[/var/www/dev/angular2-modal/node_modules/rxjs]
@ .//angular2/src/facade/async.js 13:19-45

.//uglify-js/tools/node.js
Module not found: Error: Cannot resolve module 'fs' in /var/www/dev/angular2-modal/node_modules/uglify-js/tools
resolve module fs in /var/www/dev/angular2-modal/node_modules/uglify-js/tools
looking for modules in /var/www/dev/angular2-modal/node_modules/uglify-js/node_modules
resolve 'file' fs in /var/www/dev/angular2-modal/node_modules/uglify-js/node_modules
resolve file
/var/www/dev/angular2-modal/node_modules/uglify-js/node_modules/fs doesn't exist
/var/www/dev/angular2-modal/node_modules/uglify-js/node_modules/fs.ts doesn't exist
/var/www/dev/angular2-modal/node_modules/uglify-js/node_modules/fs.js doesn't exist
/var/www/dev/angular2-modal/node_modules/uglify-js/node_modules/fs.json doesn't exist
/var/www/dev/angular2-modal/node_modules/uglify-js/node_modules/fs.css doesn't exist
/var/www/dev/angular2-modal/node_modules/uglify-js/node_modules/fs.html doesn't exist
/var/www/dev/angular2-modal/node_modules/uglify-js/node_modules/fs doesn't exist (module as directory)
looking for modules in /var/www/dev/angular2-modal/node_modules
resolve 'file' fs in /var/www/dev/angular2-modal/node_modules
resolve file
/var/www/dev/angular2-modal/node_modules/fs doesn't exist
/var/www/dev/angular2-modal/node_modules/fs.ts doesn't exist
/var/www/dev/angular2-modal/node_modules/fs.js doesn't exist
/var/www/dev/angular2-modal/node_modules/fs.json doesn't exist
/var/www/dev/angular2-modal/node_modules/fs.css doesn't exist
/var/www/dev/angular2-modal/node_modules/fs.html doesn't exist
/var/www/dev/angular2-modal/node_modules/fs doesn't exist (module as directory)
[/var/www/dev/angular2-modal/node_modules/uglify-js/node_modules/fs]
[/var/www/dev/angular2-modal/node_modules/uglify-js/node_modules/fs.ts]
[/var/www/dev/angular2-modal/node_modules/uglify-js/node_modules/fs.js]
[/var/www/dev/angular2-modal/node_modules/uglify-js/node_modules/fs.json]
[/var/www/dev/angular2-modal/node_modules/uglify-js/node_modules/fs.css]
[/var/www/dev/angular2-modal/node_modules/uglify-js/node_modules/fs.html]
[/var/www/dev/angular2-modal/node_modules/uglify-js/node_modules/fs]
[/var/www/dev/angular2-modal/node_modules/fs]
[/var/www/dev/angular2-modal/node_modules/fs.ts]
[/var/www/dev/angular2-modal/node_modules/fs.js]
[/var/www/dev/angular2-modal/node_modules/fs.json]
[/var/www/dev/angular2-modal/node_modules/fs.css]
[/var/www/dev/angular2-modal/node_modules/fs.html]
[/var/www/dev/angular2-modal/node_modules/fs]
@ .//uglify-js/tools/node.js 2:9-22

(webpack)/lib/node/NodeMainTemplateAsync.runtime.js
Module not found: Error: Cannot resolve module 'fs' in /var/www/dev/angular2-modal/node_modules/webpack/lib/node
resolve module fs in /var/www/dev/angular2-modal/node_modules/webpack/lib/node
looking for modules in /var/www/dev/angular2-modal/node_modules/webpack/web_modules
resolve 'file' fs in /var/www/dev/angular2-modal/node_modules/webpack/web_modules
resolve file
/var/www/dev/angular2-modal/node_modules/webpack/web_modules/fs doesn't exist
/var/www/dev/angular2-modal/node_modules/webpack/web_modules/fs.ts doesn't exist
/var/www/dev/angular2-modal/node_modules/webpack/web_modules/fs.js doesn't exist
/var/www/dev/angular2-modal/node_modules/webpack/web_modules/fs.json doesn't exist
/var/www/dev/angular2-modal/node_modules/webpack/web_modules/fs.css doesn't exist
/var/www/dev/angular2-modal/node_modules/webpack/web_modules/fs.html doesn't exist
/var/www/dev/angular2-modal/node_modules/webpack/web_modules/fs doesn't exist (module as directory)
looking for modules in /var/www/dev/angular2-modal/node_modules/webpack/node_modules
resolve 'file' fs in /var/www/dev/angular2-modal/node_modules/webpack/node_modules
resolve file
/var/www/dev/angular2-modal/node_modules/webpack/node_modules/fs doesn't exist
/var/www/dev/angular2-modal/node_modules/webpack/node_modules/fs.ts doesn't exist
/var/www/dev/angular2-modal/node_modules/webpack/node_modules/fs.js doesn't exist
/var/www/dev/angular2-modal/node_modules/webpack/node_modules/fs.json doesn't exist
/var/www/dev/angular2-modal/node_modules/webpack/node_modules/fs.css doesn't exist
/var/www/dev/angular2-modal/node_modules/webpack/node_modules/fs.html doesn't exist
/var/www/dev/angular2-modal/node_modules/webpack/node_modules/fs doesn't exist (module as directory)
looking for modules in /var/www/dev/angular2-modal/node_modules
resolve 'file' fs in /var/www/dev/angular2-modal/node_modules
resolve file
/var/www/dev/angular2-modal/node_modules/fs doesn't exist
/var/www/dev/angular2-modal/node_modules/fs.ts doesn't exist
/var/www/dev/angular2-modal/node_modules/fs.js doesn't exist
/var/www/dev/angular2-modal/node_modules/fs.json doesn't exist
/var/www/dev/angular2-modal/node_modules/fs.css doesn't exist
/var/www/dev/angular2-modal/node_modules/fs.html doesn't exist
/var/www/dev/angular2-modal/node_modules/fs doesn't exist (module as directory)
[/var/www/dev/angular2-modal/node_modules/webpack/web_modules/fs]
[/var/www/dev/angular2-modal/node_modules/webpack/web_modules/fs.ts]
[/var/www/dev/angular2-modal/node_modules/webpack/web_modules/fs.js]
[/var/www/dev/angular2-modal/node_modules/webpack/web_modules/fs.json]
[/var/www/dev/angular2-modal/node_modules/webpack/web_modules/fs.css]
[/var/www/dev/angular2-modal/node_modules/webpack/web_modules/fs.html]
[/var/www/dev/angular2-modal/node_modules/webpack/web_modules/fs]
[/var/www/dev/angular2-modal/node_modules/webpack/node_modules/fs]
[/var/www/dev/angular2-modal/node_modules/webpack/node_modules/fs.ts]
[/var/www/dev/angular2-modal/node_modules/webpack/node_modules/fs.js]
[/var/www/dev/angular2-modal/node_modules/webpack/node_modules/fs.json]
[/var/www/dev/angular2-modal/node_modules/webpack/node_modules/fs.css]
[/var/www/dev/angular2-modal/node_modules/webpack/node_modules/fs.html]
[/var/www/dev/angular2-modal/node_modules/webpack/node_modules/fs]
[/var/www/dev/angular2-modal/node_modules/fs]
[/var/www/dev/angular2-modal/node_modules/fs.ts]
[/var/www/dev/angular2-modal/node_modules/fs.js]
[/var/www/dev/angular2-modal/node_modules/fs.json]
[/var/www/dev/angular2-modal/node_modules/fs.css]
[/var/www/dev/angular2-modal/node_modules/fs.html]
[/var/www/dev/angular2-modal/node_modules/fs]
@ (webpack)/lib/node/NodeMainTemplateAsync.runtime.js 9:2-15 24:2-15

(webpack)/lib/node/NodeOutputFileSystem.js
Module not found: Error: Cannot resolve module 'fs' in /var/www/dev/angular2-modal/node_modules/webpack/lib/node
resolve module fs in /var/www/dev/angular2-modal/node_modules/webpack/lib/node
looking for modules in /var/www/dev/angular2-modal/node_modules/webpack/web_modules
resolve 'file' fs in /var/www/dev/angular2-modal/node_modules/webpack/web_modules
resolve file
/var/www/dev/angular2-modal/node_modules/webpack/web_modules/fs doesn't exist
/var/www/dev/angular2-modal/node_modules/webpack/web_modules/fs.ts doesn't exist
/var/www/dev/angular2-modal/node_modules/webpack/web_modules/fs.js doesn't exist
/var/www/dev/angular2-modal/node_modules/webpack/web_modules/fs.json doesn't exist
/var/www/dev/angular2-modal/node_modules/webpack/web_modules/fs.css doesn't exist
/var/www/dev/angular2-modal/node_modules/webpack/web_modules/fs.html doesn't exist
/var/www/dev/angular2-modal/node_modules/webpack/web_modules/fs doesn't exist (module as directory)
looking for modules in /var/www/dev/angular2-modal/node_modules/webpack/node_modules
resolve 'file' fs in /var/www/dev/angular2-modal/node_modules/webpack/node_modules
resolve file
/var/www/dev/angular2-modal/node_modules/webpack/node_modules/fs doesn't exist
/var/www/dev/angular2-modal/node_modules/webpack/node_modules/fs.ts doesn't exist
/var/www/dev/angular2-modal/node_modules/webpack/node_modules/fs.js doesn't exist
/var/www/dev/angular2-modal/node_modules/webpack/node_modules/fs.json doesn't exist
/var/www/dev/angular2-modal/node_modules/webpack/node_modules/fs.css doesn't exist
/var/www/dev/angular2-modal/node_modules/webpack/node_modules/fs.html doesn't exist
/var/www/dev/angular2-modal/node_modules/webpack/node_modules/fs doesn't exist (module as directory)
looking for modules in /var/www/dev/angular2-modal/node_modules
resolve 'file' fs in /var/www/dev/angular2-modal/node_modules
resolve file
/var/www/dev/angular2-modal/node_modules/fs doesn't exist
/var/www/dev/angular2-modal/node_modules/fs.ts doesn't exist
/var/www/dev/angular2-modal/node_modules/fs.js doesn't exist
/var/www/dev/angular2-modal/node_modules/fs.json doesn't exist
/var/www/dev/angular2-modal/node_modules/fs.css doesn't exist
/var/www/dev/angular2-modal/node_modules/fs.html doesn't exist
/var/www/dev/angular2-modal/node_modules/fs doesn't exist (module as directory)
[/var/www/dev/angular2-modal/node_modules/webpack/web_modules/fs]
[/var/www/dev/angular2-modal/node_modules/webpack/web_modules/fs.ts]
[/var/www/dev/angular2-modal/node_modules/webpack/web_modules/fs.js]
[/var/www/dev/angular2-modal/node_modules/webpack/web_modules/fs.json]
[/var/www/dev/angular2-modal/node_modules/webpack/web_modules/fs.css]
[/var/www/dev/angular2-modal/node_modules/webpack/web_modules/fs.html]
[/var/www/dev/angular2-modal/node_modules/webpack/web_modules/fs]
[/var/www/dev/angular2-modal/node_modules/webpack/node_modules/fs]
[/var/www/dev/angular2-modal/node_modules/webpack/node_modules/fs.ts]
[/var/www/dev/angular2-modal/node_modules/webpack/node_modules/fs.js]
[/var/www/dev/angular2-modal/node_modules/webpack/node_modules/fs.json]
[/var/www/dev/angular2-modal/node_modules/webpack/node_modules/fs.css]
[/var/www/dev/angular2-modal/node_modules/webpack/node_modules/fs.html]
[/var/www/dev/angular2-modal/node_modules/webpack/node_modules/fs]
[/var/www/dev/angular2-modal/node_modules/fs]
[/var/www/dev/angular2-modal/node_modules/fs.ts]
[/var/www/dev/angular2-modal/node_modules/fs.js]
[/var/www/dev/angular2-modal/node_modules/fs.json]
[/var/www/dev/angular2-modal/node_modules/fs.css]
[/var/www/dev/angular2-modal/node_modules/fs.html]
[/var/www/dev/angular2-modal/node_modules/fs]
@ (webpack)/lib/node/NodeOutputFileSystem.js 5:9-22

(webpack)/lib/node/OldNodeWatchFileSystem.js
Module not found: Error: Cannot resolve module 'fs' in /var/www/dev/angular2-modal/node_modules/webpack/lib/node
resolve module fs in /var/www/dev/angular2-modal/node_modules/webpack/lib/node
looking for modules in /var/www/dev/angular2-modal/node_modules/webpack/web_modules
resolve 'file' fs in /var/www/dev/angular2-modal/node_modules/webpack/web_modules
resolve file
/var/www/dev/angular2-modal/node_modules/webpack/web_modules/fs doesn't exist
/var/www/dev/angular2-modal/node_modules/webpack/web_modules/fs.ts doesn't exist
/var/www/dev/angular2-modal/node_modules/webpack/web_modules/fs.js doesn't exist
/var/www/dev/angular2-modal/node_modules/webpack/web_modules/fs.json doesn't exist
/var/www/dev/angular2-modal/node_modules/webpack/web_modules/fs.css doesn't exist
/var/www/dev/angular2-modal/node_modules/webpack/web_modules/fs.html doesn't exist
/var/www/dev/angular2-modal/node_modules/webpack/web_modules/fs doesn't exist (module as directory)
looking for modules in /var/www/dev/angular2-modal/node_modules/webpack/node_modules
resolve 'file' fs in /var/www/dev/angular2-modal/node_modules/webpack/node_modules
resolve file
/var/www/dev/angular2-modal/node_modules/webpack/node_modules/fs doesn't exist
/var/www/dev/angular2-modal/node_modules/webpack/node_modules/fs.ts doesn't exist
/var/www/dev/angular2-modal/node_modules/webpack/node_modules/fs.js doesn't exist
/var/www/dev/angular2-modal/node_modules/webpack/node_modules/fs.json doesn't exist
/var/www/dev/angular2-modal/node_modules/webpack/node_modules/fs.css doesn't exist
/var/www/dev/angular2-modal/node_modules/webpack/node_modules/fs.html doesn't exist
/var/www/dev/angular2-modal/node_modules/webpack/node_modules/fs doesn't exist (module as directory)
looking for modules in /var/www/dev/angular2-modal/node_modules
resolve 'file' fs in /var/www/dev/angular2-modal/node_modules
resolve file
/var/www/dev/angular2-modal/node_modules/fs doesn't exist
/var/www/dev/angular2-modal/node_modules/fs.ts doesn't exist
/var/www/dev/angular2-modal/node_modules/fs.js doesn't exist
/var/www/dev/angular2-modal/node_modules/fs.json doesn't exist
/var/www/dev/angular2-modal/node_modules/fs.css doesn't exist
/var/www/dev/angular2-modal/node_modules/fs.html doesn't exist
/var/www/dev/angular2-modal/node_modules/fs doesn't exist (module as directory)
[/var/www/dev/angular2-modal/node_modules/webpack/web_modules/fs]
[/var/www/dev/angular2-modal/node_modules/webpack/web_modules/fs.ts]
[/var/www/dev/angular2-modal/node_modules/webpack/web_modules/fs.js]
[/var/www/dev/angular2-modal/node_modules/webpack/web_modules/fs.json]
[/var/www/dev/angular2-modal/node_modules/webpack/web_modules/fs.css]
[/var/www/dev/angular2-modal/node_modules/webpack/web_modules/fs.html]
[/var/www/dev/angular2-modal/node_modules/webpack/web_modules/fs]
[/var/www/dev/angular2-modal/node_modules/webpack/node_modules/fs]
[/var/www/dev/angular2-modal/node_modules/webpack/node_modules/fs.ts]
[/var/www/dev/angular2-modal/node_modules/webpack/node_modules/fs.js]
[/var/www/dev/angular2-modal/node_modules/webpack/node_modules/fs.json]
[/var/www/dev/angular2-modal/node_modules/webpack/node_modules/fs.css]
[/var/www/dev/angular2-modal/node_modules/webpack/node_modules/fs.html]
[/var/www/dev/angular2-modal/node_modules/webpack/node_modules/fs]
[/var/www/dev/angular2-modal/node_modules/fs]
[/var/www/dev/angular2-modal/node_modules/fs.ts]
[/var/www/dev/angular2-modal/node_modules/fs.js]
[/var/www/dev/angular2-modal/node_modules/fs.json]
[/var/www/dev/angular2-modal/node_modules/fs.css]
[/var/www/dev/angular2-modal/node_modules/fs.html]
[/var/www/dev/angular2-modal/node_modules/fs]
@ (webpack)/lib/node/OldNodeWatchFileSystem.js 5:9-22

.//mkdirp/index.js
Module not found: Error: Cannot resolve module 'fs' in /var/www/dev/angular2-modal/node_modules/mkdirp
resolve module fs in /var/www/dev/angular2-modal/node_modules/mkdirp
looking for modules in /var/www/dev/angular2-modal/node_modules
resolve 'file' fs in /var/www/dev/angular2-modal/node_modules
resolve file
/var/www/dev/angular2-modal/node_modules/fs doesn't exist
/var/www/dev/angular2-modal/node_modules/fs.ts doesn't exist
/var/www/dev/angular2-modal/node_modules/fs.js doesn't exist
/var/www/dev/angular2-modal/node_modules/fs.json doesn't exist
/var/www/dev/angular2-modal/node_modules/fs.css doesn't exist
/var/www/dev/angular2-modal/node_modules/fs.html doesn't exist
/var/www/dev/angular2-modal/node_modules/fs doesn't exist (module as directory)
[/var/www/dev/angular2-modal/node_modules/fs]
[/var/www/dev/angular2-modal/node_modules/fs.ts]
[/var/www/dev/angular2-modal/node_modules/fs.js]
[/var/www/dev/angular2-modal/node_modules/fs.json]
[/var/www/dev/angular2-modal/node_modules/fs.css]
[/var/www/dev/angular2-modal/node_modules/fs.html]
[/var/www/dev/angular2-modal/node_modules/fs]
@ .//mkdirp/index.js 2:9-22

.//graceful-fs/graceful-fs.js
Module not found: Error: Cannot resolve module 'fs' in /var/www/dev/angular2-modal/node_modules/graceful-fs
resolve module fs in /var/www/dev/angular2-modal/node_modules/graceful-fs
looking for modules in /var/www/dev/angular2-modal/node_modules
resolve 'file' fs in /var/www/dev/angular2-modal/node_modules
resolve file
/var/www/dev/angular2-modal/node_modules/fs doesn't exist
/var/www/dev/angular2-modal/node_modules/fs.ts doesn't exist
/var/www/dev/angular2-modal/node_modules/fs.js doesn't exist
/var/www/dev/angular2-modal/node_modules/fs.json doesn't exist
/var/www/dev/angular2-modal/node_modules/fs.css doesn't exist
/var/www/dev/angular2-modal/node_modules/fs.html doesn't exist
/var/www/dev/angular2-modal/node_modules/fs doesn't exist (module as directory)
[/var/www/dev/angular2-modal/node_modules/fs]
[/var/www/dev/angular2-modal/node_modules/fs.ts]
[/var/www/dev/angular2-modal/node_modules/fs.js]
[/var/www/dev/angular2-modal/node_modules/fs.json]
[/var/www/dev/angular2-modal/node_modules/fs.css]
[/var/www/dev/angular2-modal/node_modules/fs.html]
[/var/www/dev/angular2-modal/node_modules/fs]
@ .//graceful-fs/graceful-fs.js 1:9-22

.//graceful-fs/fs.js
Module not found: Error: Cannot resolve module 'fs' in /var/www/dev/angular2-modal/node_modules/graceful-fs
resolve module fs in /var/www/dev/angular2-modal/node_modules/graceful-fs
looking for modules in /var/www/dev/angular2-modal/node_modules
resolve 'file' fs in /var/www/dev/angular2-modal/node_modules
resolve file
/var/www/dev/angular2-modal/node_modules/fs doesn't exist
/var/www/dev/angular2-modal/node_modules/fs.ts doesn't exist
/var/www/dev/angular2-modal/node_modules/fs.js doesn't exist
/var/www/dev/angular2-modal/node_modules/fs.json doesn't exist
/var/www/dev/angular2-modal/node_modules/fs.css doesn't exist
/var/www/dev/angular2-modal/node_modules/fs.html doesn't exist
/var/www/dev/angular2-modal/node_modules/fs doesn't exist (module as directory)
[/var/www/dev/angular2-modal/node_modules/fs]
[/var/www/dev/angular2-modal/node_modules/fs.ts]
[/var/www/dev/angular2-modal/node_modules/fs.js]
[/var/www/dev/angular2-modal/node_modules/fs.json]
[/var/www/dev/angular2-modal/node_modules/fs.css]
[/var/www/dev/angular2-modal/node_modules/fs.html]
[/var/www/dev/angular2-modal/node_modules/fs]
@ .//graceful-fs/fs.js 3:9-22

.//chokidar/index.js
Module not found: Error: Cannot resolve module 'fs' in /var/www/dev/angular2-modal/node_modules/chokidar
resolve module fs in /var/www/dev/angular2-modal/node_modules/chokidar
looking for modules in /var/www/dev/angular2-modal/node_modules
resolve 'file' fs in /var/www/dev/angular2-modal/node_modules
resolve file
/var/www/dev/angular2-modal/node_modules/fs doesn't exist
/var/www/dev/angular2-modal/node_modules/fs.ts doesn't exist
/var/www/dev/angular2-modal/node_modules/fs.js doesn't exist
/var/www/dev/angular2-modal/node_modules/fs.json doesn't exist
/var/www/dev/angular2-modal/node_modules/fs.css doesn't exist
/var/www/dev/angular2-modal/node_modules/fs.html doesn't exist
/var/www/dev/angular2-modal/node_modules/fs doesn't exist (module as directory)
[/var/www/dev/angular2-modal/node_modules/fs]
[/var/www/dev/angular2-modal/node_modules/fs.ts]
[/var/www/dev/angular2-modal/node_modules/fs.js]
[/var/www/dev/angular2-modal/node_modules/fs.json]
[/var/www/dev/angular2-modal/node_modules/fs.css]
[/var/www/dev/angular2-modal/node_modules/fs.html]
[/var/www/dev/angular2-modal/node_modules/fs]
@ .//chokidar/index.js 3:9-22

.//chokidar/lib/nodefs-handler.js
Module not found: Error: Cannot resolve module 'fs' in /var/www/dev/angular2-modal/node_modules/chokidar/lib
resolve module fs in /var/www/dev/angular2-modal/node_modules/chokidar/lib
looking for modules in /var/www/dev/angular2-modal/node_modules
resolve 'file' fs in /var/www/dev/angular2-modal/node_modules
resolve file
/var/www/dev/angular2-modal/node_modules/fs doesn't exist
/var/www/dev/angular2-modal/node_modules/fs.ts doesn't exist
/var/www/dev/angular2-modal/node_modules/fs.js doesn't exist
/var/www/dev/angular2-modal/node_modules/fs.json doesn't exist
/var/www/dev/angular2-modal/node_modules/fs.css doesn't exist
/var/www/dev/angular2-modal/node_modules/fs.html doesn't exist
/var/www/dev/angular2-modal/node_modules/fs doesn't exist (module as directory)
[/var/www/dev/angular2-modal/node_modules/fs]
[/var/www/dev/angular2-modal/node_modules/fs.ts]
[/var/www/dev/angular2-modal/node_modules/fs.js]
[/var/www/dev/angular2-modal/node_modules/fs.json]
[/var/www/dev/angular2-modal/node_modules/fs.css]
[/var/www/dev/angular2-modal/node_modules/fs.html]
[/var/www/dev/angular2-modal/node_modules/fs]
@ .//chokidar/lib/nodefs-handler.js 3:9-22

.//chokidar/lib/fsevents-handler.js
Module not found: Error: Cannot resolve module 'fs' in /var/www/dev/angular2-modal/node_modules/chokidar/lib
resolve module fs in /var/www/dev/angular2-modal/node_modules/chokidar/lib
looking for modules in /var/www/dev/angular2-modal/node_modules
resolve 'file' fs in /var/www/dev/angular2-modal/node_modules
resolve file
/var/www/dev/angular2-modal/node_modules/fs doesn't exist
/var/www/dev/angular2-modal/node_modules/fs.ts doesn't exist
/var/www/dev/angular2-modal/node_modules/fs.js doesn't exist
/var/www/dev/angular2-modal/node_modules/fs.json doesn't exist
/var/www/dev/angular2-modal/node_modules/fs.css doesn't exist
/var/www/dev/angular2-modal/node_modules/fs.html doesn't exist
/var/www/dev/angular2-modal/node_modules/fs doesn't exist (module as directory)
[/var/www/dev/angular2-modal/node_modules/fs]
[/var/www/dev/angular2-modal/node_modules/fs.ts]
[/var/www/dev/angular2-modal/node_modules/fs.js]
[/var/www/dev/angular2-modal/node_modules/fs.json]
[/var/www/dev/angular2-modal/node_modules/fs.css]
[/var/www/dev/angular2-modal/node_modules/fs.html]
[/var/www/dev/angular2-modal/node_modules/fs]
@ .//chokidar/lib/fsevents-handler.js 3:9-22

Replace existing dialog contentRef by another Component

I'm working on a custom modal window, integrating a form. This form is composed of 4 parts, separated in 4 different components.
My goal is to keep the same dialog, which will return a single promise response to the opener component, and switch the dialog's contentRef to next form's component.

I achieved it by adding a getter on dialog's bootstrapRef property, then I execute the following TS code within my custom modal component:

    let bindings = Injector.resolve([
      provide(ModalDialogInstance, { useValue: this.dialog }),
      provide(ICustomModal, { useValue: this.modalContentData })
    ]);
    this.componentLoader.loadIntoLocation(
      this.modelContentData.nextFormType, this.dialog.bootstrapRef.location, 'modalDialog', bindings)
      .then(contentRef => {
        this.dialog.contentRef.dispose();
        this.dialog.contentRef = contentRef;
        return this.dialog;
      });

Firstly, do you see any issue doing this by this way ?
Secondly, what do you think about adding a getter on the bootstrapRef dialog's property ?

About the "Known issue - DI exception"

I've been using the modal for a few weeks now and I'm pretty happy with it. Great work!

However, the DI-know issue that requires us to add this kind of code ...

return Injector.resolve([
      provide(DynamicComponentLoader, {useValue: this.injector.get(DynamicComponentLoader)}),
      provide(ICustomModal, {useValue: new WizardModalContent(...),
      provide(IterableDiffers, {useValue: this.injector.get(IterableDiffers)}),
      provide(KeyValueDiffers, {useValue: this.injector.get(KeyValueDiffers)}),
      provide(Renderer, {useValue: this._renderer}),
      provide(MyService, {useValue: this.injector.get(MyService}), 
      provide(/*whatvever the component you put in the modal (or ANY of it's subcomponents need*/) 
    ]);

... combined with the fact that those components apparently can't declare this ...

@Component({
    providers: [MyService]
})

... because that crashes a well. And that of course an issue that will bite me real hard one I reuse that component in a non-modal context :(

Do you think think this can all be solved by fixing angular/angular#4330? If so, maybe we should breathe some more life into this issue!

Iframe, would it be possible to popup in parent window?

Usage with SystemJS

Hi,
I added the modal using npm and added it to my SystemJS bindings as below. But the angular2 polyfill doesn't seem to be capable to load it. Is there something I am doing incorrectly in the mapping below? Since I didnt find any examples with SystemJS in the demo code I wasnt sure if there was full SystemJS support yet. Sorry I am a noob to both Ng2 and SystemJS, so I may be missing something completely fundamental.

map: {
                    'angular2-modal': "node_modules/angular2-modal/dist/angular2-modal"
                }

Use of ngModel inside modal template fires an exception on dialog open

I'am not sure is this issue exactly of angular2-modal but here some info it might be useful for someone else

I got a trouble using angular2-modal when decided to implement input with ngModel inside modal template e.g.

<input type="text" class="form-control" required [(ngModel)]="data">

after that I got an exception while opening a modal dialog: EXCEPTION: No provider for e! (t -> Token NgValueAccessor -> e -> e)

while trying to solve a problem I found similar issue:

http://stackoverflow.com/questions/34606534/angular2-no-provider-for-renderer-ngmodel-token-ngvalueaccessor-defaultv

answers in that topic helps me to fix my problem:

Insert additional provide to bindings when calling dialog open

        let bindings = Injector.resolve([
            provide(ICustomModal, {useValue: DemoPage.modalData[type]}),
            provide(Renderer, { useValue: this._renderer}) // here we go. constructor(private _renderer: Renderer)
        ]);

after those changes ngModel works as expected.

so could you add a reference to Renderer inside dialog source or we need to use this workaround? I'am expecting usage of forms inside modals will be often so it might help to save some time

Bootstrap 4?

Does this work with Bootstrap 4?

require is not defined

I am trying to incorporate this into an existing project. I did an npm install angular2-modal and then referenced <script src="node_modules/angular2-modal/dist/angular2-modal.js"></script> in my index.html file. When running my project, I am getting required is not defined. Am I missing something here?

Error: BootstrapModalContainer'(ModalDialogInstance, undefined).

👋, getting below error when trying to open a custom modal.

EXCEPTION: Cannot resolve all parameters for 'BootstrapModalContainer'(ModalDialogInstance, undefined). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'BootstrapModalContainer' is decorated with Injectable.

Here is a snippet of the modal code

import {ICustomModalComponent, ICustomModal} from "angular2-modal/dist/commonjs/models/ICustomModal";
import {ModalDialogInstance} from "angular2-modal/dist/commonjs/models/ModalDialogInstance";

export class PreviewModal implements ICustomModalComponent {
  dialog: ModalDialogInstance;
  context: PreviewModalData;

  constructor(dialog: ModalDialogInstance, modelContentData: ICustomModal) {
    this.dialog = dialog;
    this.context = <PreviewModalData>modelContentData;
    console.log(this.context);
  }
...

ng2 version: beta.9
bundler: webpack

What is the proper way to integrate with angular2-seed?

I'm not sure what I'm doing wrong, but after upgrading angular2-modal to latest version, I get various problems depending on how I configure SystemJS for the dependency.

It looks like the way angular2-modal was namespaced was changed.
Here is how SystemJS configured, right now.

this.SYSTEM_CONFIG_DEV.map['angular2-modal/angular2-modal'] = angular2-modal; this.SYSTEM_CONFIG_DEV.paths['angular2-modal/*'] = ${this.APP_BASE}node_modules/angular2-modal/dist/systemjs/angular2-modal-0.1.1;

I need the map because my IDE (Webstorm) fails to recognize if I import from 'angular2-modal'. It only recognizes angular2-modal/angular2-modal

But with this configuration, my prod build fails with this error.
Unhandled rejection Error on fetch for angular2-modal/angular2-modal.js at file:///Users/toktik/Projects/kaizana/client/node_modules/angular2-modal/angular2-modal.js Loading dist/tmp/main.js Error: ENOENT: no such file or directory, open '/Users/toktik/Projects/kaizana/client/node_modules/angular2-modal/angular2-modal.js' at Error (native)

As I understand for prod, angular2-seed uses browserify, which is looking in node_modules/angular2-modal/angular2-modal.js, which I believe is correct file.

Why the angular2-modal build changed and why version number is included in filename? If I'm wrong and it should not be the case. What is the best way to handle this?

DOM is null

I don't think the code adding the 'modal-open' class to the body actually works, because DOM is apparently always null due to a bug in angular2.

For my own needs I just changed the code to modify window.document.body directly.

Using angular2 beta 12.

References:

webpack -p build error

Possibly this https://github.com/palantir/tslint/pull/687

The local install seems broken on many levels just now (?)

jason@jason-LIFEBOOK-AH532:~/Desktop/angular2-modal$ webpack
Hash: b11bc454943a34bd84db
Version: webpack 1.12.14
Time: 536ms
     Asset      Size  Chunks             Chunk Names
 vendor.js  55 bytes    0, 1  [emitted]  vendor
 common.js   3.56 kB    1, 0  [emitted]  common
vendor.map  86 bytes    0, 1  [emitted]  vendor
common.map   3.57 kB    1, 0  [emitted]  common
    + 3 hidden modules

ERROR in ./src/demo/vendor.ts
Module build failed: Error: Could not find the following rules specified in the configuration:
no-trailing-comma
    at Object.loadRules (/home/jason/Desktop/angular2-modal/node_modules/tslint/lib/ruleLoader.js:29:15)
    at Linter.lint (/home/jason/Desktop/angular2-modal/node_modules/tslint/lib/tslint.js:24:44)
    at Object.lint (/home/jason/Desktop/angular2-modal/node_modules/tslint-loader/index.js:55:23)
    at Object.module.exports (/home/jason/Desktop/angular2-modal/node_modules/tslint-loader/index.js:139:8)

ERROR in ./src/angular2-modal/angular2-modal.ts
Module build failed: Error: Could not find the following rules specified in the configuration:
no-trailing-comma
    at Object.loadRules (/home/jason/Desktop/angular2-modal/node_modules/tslint/lib/ruleLoader.js:29:15)
    at Linter.lint (/home/jason/Desktop/angular2-modal/node_modules/tslint/lib/tslint.js:24:44)
    at Object.lint (/home/jason/Desktop/angular2-modal/node_modules/tslint-loader/index.js:55:23)
    at Object.module.exports (/home/jason/Desktop/angular2-modal/node_modules/tslint-loader/index.js:139:8)

ERROR in ./src/demo/bootstrap.ts
Module build failed: Error: Could not find the following rules specified in the configuration:
no-trailing-comma
    at Object.loadRules (/home/jason/Desktop/angular2-modal/node_modules/tslint/lib/ruleLoader.js:29:15)
    at Linter.lint (/home/jason/Desktop/angular2-modal/node_modules/tslint/lib/tslint.js:24:44)
    at Object.lint (/home/jason/Desktop/angular2-modal/node_modules/tslint-loader/index.js:55:23)
    at Object.module.exports (/home/jason/Desktop/angular2-modal/node_modules/tslint-loader/index.js:139:8)

Error: Uncaught (in promise): No provider for ModalDialogInstance! (AdditionCalculateWindow -> ModalDialogInstance)

Error: Uncaught (in promise): No provider for ModalDialogInstance! (AdditionCalculateWindow -> ModalDialogInstance)

Copied straight from the examples.

What's going on?

Thx.

Zone typings are missing

typings ERR! message Unable to read typings for "zone". You should check the path is correct
typings ERR! caused by https://raw.githubusercontent.com/angular/DefinitelyTyped/31e7317c9a0793857109236ef7c7f223305a8aa9/zone/zone.d.ts responded with 404, expected it to equal 200

typings ERR! cwd /Users/maximilianalexander/githubtestprojects/angular2-modal
typings ERR! system Darwin 15.3.0
typings ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/typings/dist/bin/typings-install.js"
typings ERR! node -v v5.5.0
typings ERR! typings -v 0.6.8

typings ERR! If you need help, you may report this error at:
typings ERR!   <https://github.com/typings/typings/issues>
`