angular 2 modal window/dialog via service

Question

I want to create my own modal window using bootstrap markup and css. I have looked at existing projects like ng2-bootstrap but don't like that I have to put the modal html in the template - i would prefer it to be a service that has an open() method which returns a promise. This is how the angular-ui-bootstrap for ng1 works and would prefer to keep that. Unfortunately the ng2 version of this doesn't support bootstrap 3.

What angular class/api can I use to achieve this? I would like to create a service that has an open method which dynamically adds/remove dom nodes.

Check: http://stackoverflow.com/questions/36566698/cant-initialize-dynamically-appended-html-component-in-angular-2 it might help. — eko, Nov 10 '16 at 12:52

score 0 · Answer 1 · answered Nov 10 '16 at 18:26

0

The Angular 2 version of angular-ui-bootstrap lives at https://ng-bootstrap.github.io and it does have modal service which can open templates or components: https://ng-bootstrap.github.io/#/components/modal

answered Nov 10 '16 at 18:26

pkozlowski.opensource

117,202
60
326
286

1

Yes but it doesn't support bs3 as per my original post – the-a-train Nov 10 '16 at 20:13

score 0 · Answer 2 · answered Aug 07 '17 at 09:47

Consider this solution:

https://stackoverflow.com/a/45494297/4572425

For example:

alertOK:

this.alertCtmService.alertOK("This is an alert!").subscribe(function (resp) {
    console.log("alertCtmService.alertOK.subscribe: resp=" + resp.ok);
    this.saveData();
}.bind(this) );

alertConfirm:

this.alertCtmService.alertConfirm("Save changes???").subscribe(function (resp) {
    console.log("alertCtmService.alertOK.subscribe: resp=" + resp.ok);
    this.saveData();
}.bind(this) );

angular 2 modal window/dialog via service

2 Answers2