eestein eestein - 9 months ago 112
AngularJS Question

How can I open a modal component programmatically?

I'd like to open a modal programmatically like a modal service. This is how I did it in angular 1 :{template:'url.html', controller: MyController})
that way I wouldn't need to add modal HTML code to my parent screen.

Let's say I have this folder structure:

-- screen1
---- parent.component.ts
-- modal1
---- modal1.component.ts
---- modal1.template.html
-- modal2
---- modal2.component.ts
---- modal2.template.html

then on
I'd like to open

But since the modal I'm opening is dynamic I'd like it to open like a service (or anything similar). So I'm passing the information to my
of which modal it should open, and then using a modal service (like in angular1) it opens the modal.

How can I approach this?


Answer Source

You can use angular-ui/bootstrap port to Angular 2 which has a service equivalent to uibModal:

Its usage is equivalent to the Angular 1.x version - you just call the open() method on a service! Here is an example:

export class NgbdModalComponent {
  constructor(private modalService: NgbModal) {}

  open() {
    const modalRef =;

Here is a live example: