0

This is not the duplicate of this, I would like to know how to create a reusable modal without having the modal component in all pages.

Angular2

In component based architecture, to make a resuable confirm-modal component, we need to add the component confirm-modal in all pages. The code for confirm-modal looks like this

@Component({
 selector: 'confirm-modal',
 exportAs: 'confirmModal',
 template: ``
})
export class ConfirmModal {
 // functions
 show() {}
}

So every time when I need a confirm modal in any view, I need to explicitly add confirm-modal in the page and use @ViewChild(confirmModal) cm to access the confirm modal apis like show, hide, confirm etc.

I would like to avoid adding this component html in all pages. Is there any way to do this in angular2.

In Angular1.5

We use angular-bootstrap modal, the code looks like this

$uibModal.open({
  templateUrl: 'myModalContent.html',
  controller: 'ModalInstanceCtrl',
  size: size,
  appendTo: parentElem,
  resolve: {
    items: function () {
      return $ctrl.items;
    }
  }
});

So, here I just need to mention the template url and resolve refers to @Inputs in angular2. I would like to have a similar approach in angular2.

I thought of creating a injectable service in angular2 and use sevice.show() to simply show the modal in any view. But I understand without component we cant show the template.

Vishnu Sureshkumar
  • 2,246
  • 6
  • 35
  • 52
  • 1
    You can take a look at ng-bootstrap for Angular 4 (if you can upgrade to that version of Angular). It has a [modalService](https://ng-bootstrap.github.io/#/components/modal) and you can pass a component class to it. If you define a `ConfirmModal` component, you could set a different message/question each time you show the confirm modal. – ConnorsFan Jun 26 '17 at 21:36
  • Possible duplicate of [Angular 2.0 and Modal Dialog](https://stackoverflow.com/questions/34513558/angular-2-0-and-modal-dialog) – Dmitriy Jun 27 '17 at 01:31
  • @Dmitriy - This is not the duplicate of the question you have mentioned. Please go through the description once and decide whether it is duplicate or not. – Vishnu Sureshkumar Jun 27 '17 at 07:09

0 Answers0