Using modal windows from the NGX bootstrap library can be very convenient and easy to use. However, in a large application in which we may use it multiple times, a Modal window can make us write a lot of duplicated code.

The problem

Let’s think about this example:

Each Modal window needs a Close Button at the top and a Submit Button at the bottom. We don’t want to write these markup for every component in which we use the Modal Window. We want to be able to reuse these elements and the methods they might trigger for all our use cases.

Getting started:

For this solution use the modal window library from:

https://valor-software.com/ngx-bootstrap

Install Modal from NGX bootstrap

ng add ngx-bootstrap  --component modals

According to the documentation, you can open a template reference inside de Modal or a Component inside like this example:

demo.component.ts

@Component({
    selector: 'app-demo',
    template: `<div onClick="openModalWithComponent()">Open modal </div>`,
})
export class DemoComponent {
    bsModalRef: BsModalRef;
    constructor(private modalService: BsModalService) {}

    openModalWithComponent() {
        this.bsModalRef =        this.modalService.show(ModalContentComponent);
    }
    close() { 
      this.bsModalRef.hide();
    }
    submit() {
      console.log('submit');
    }
}

#bootstrap-modal #dynamic-components #ngx-bootstrap #angular2 #typescript