Home   →   Blog   →   Popular Angular Dialog Windows and How We Tried to Improve Them

Popular Angular Dialog Windows and How We Tried to Improve Them

Angular is an actively developing framework with new components being created for it every day. But not all of them have such a set of functionality as their analogs in AngularJS have. One of these components is the dialog window (popup).

At the moment, there are several popular implementations of dialog windows such as angular2-modal (https://github.com/shlomiassaf/angular2-modal) and ngx-modal (https://github.com/pleerock/ngx-modal). What can they do?

Opening the dialog window directly

These components allow you to open the dialog windows with the specified template from the component you need. Often, you just need to import the required service and call the method to open the dialog window. Otherwise, you need to wrap your template in the base component and call the  function "open" on its reference.

It looks like this:

//Option 1. Calling from the component

openDialog() {


       .body(‘<h4>My first dialog window</h4>’)



//Option 2. Wrapping the dialog window in the base component

<button (click)="myDialogWindow.open()">open dialog window</button>

<modal #myDialogWindow>

    <!-- Your dialog window HTML code -->



As a rule, the components of the dialog window have a set of configurations, such as the dialog window size, closing by outside click, show / hide the close button, etc. It allows you to customize the dialog window to different requirements.

What do these components lack?

Dialog window as a dynamically created component

As we have described earlier, for some components, it is necessary to pass an HTML template to a function. As for other components, and you should use them directly in the HTML page and wrap your template in them.

In the first case, your dialog window is being inserted into the HTML code during the call. However, it is not a separate component, and this fact trespasses against the principles underlying the Angular applications.

In the second case, you can wrap your component in the base dialog window component, but your template will immediately get into the HTML code increasing the HTML file size and the page load time. Also, there may be a problem according to the data reset, because the after closing dialog will be hidden, not deleted.

Angular allows you to dynamically insert any components in the template of another component. Thus, it will be drawn only when the function is called and a new instance of the component will be created on each call. And component will be destroyed on close action, however it could be configured optionally.

Data transfer

It would also be useful to be able to pass  various data (objects, lines, arrays, etc) to the dialog window.


We have implemented the first version of ng2-dialog-window which doesn’t have a significant part of the listed flaws. In the future, we’re going not only to exclude all of them but also expand functionality in whole.

How to use ng2-dialog-window?

1) You need to connect Ng2DialogWindowService to the component you want to call the dialog window from and call the openModal method by passing to it the ViewContainerRef and your dialog window component

constructor( private dialog: Ng2DialogWindowService, private viewContainer: ViewContainerRef) {


openModal() {

    this.dialog.openModal(this.viewContainer, {component: YourDialogWindowComponent})


2) Add the component into the entryComponents



   entryComponents: [




3) Extend your component from Ng2DialogWindowComponent to inherit base methods and wrap the template in the ng2-dialog-window-component tag.

P.S. Angular doesn't seem to provide any simple way to inherit styles from another component. Feel free to create an issue ticket if you think I am wrong.


    selector: 'my-dialog-window',

    template: '<ng2-dialog-window-component><!-- Body of dialog window --></ng2-dialog-window-component>'


export class YourDialogWindowComponent extends Ng2DialogWindowComponent {


The first improvements are going to appear in the near future. You can learn the documentation in more details here.

Feel free to use, contribute, create issues. Let’s make this component better together

comments powered by Disqus
Cf68cdaaf75f9cd1417267c6b1cafb3813c488a1 Virtual Reality Applications
Augmented reality apps are widely used – from geolocalization to using it in gaming industry. Augmented reality app is a new way to access data determined by environment conditions.
754d17aa02f8c56a0e0b671d45bf2455f6177062 Agile Methodology (Scrum)
Scrum is the very popular agile methodology for managing product development and project delivery. Scrum is the framework that could be applied for the development of product use cases, different projects or entire products.
1a1b621bfd24aba09a56bb25cf18719ad46ef190 News App Development
Smartphones are regularly used everywhere & anytime: in cars, on the way to the office, during the rest on holidays or weekends. That’s very convenient way for users to access important or just fun information with the help of news mobile app.
D63ac21dfd17c4acc93d52d9bdc72fea10e84edd Geolocation Services in Mobile Tracking Software
Geolocation services are used by many mobile apps, websites, mobile operators etc.