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() {

   this.dialog

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

       .open();

}

//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 -->

</modal>

Customization

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.

Ng2-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

​@NgModule({

   //...

   entryComponents: [

       YourDialogWindowComponent

   ],

})

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.

@Component({

    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

Next Posts
Bd654a87439a6c2daa5fcd146f9b25ad7e1ab288 Rails Application Template for Creating Ruby-on-Rails Apps
Rails Application Template. A basic template for creating Ruby-on-Rails applications
7c5a498bcb2ed3c81303f9531c1e0f23889b54e7 GOBUTTON Plugin. Diversify the Waiting Process
Usually, people don’t like to wait and do “nothing”. However, very often it’s inevitable. That's why one needs to make this time as pleasant or at least tolerable as possible. And this is especially true when developing applications, for it's very importa
B8ae08715ca65ef26850f8ed792ec77c5f6c4fa2 Timetracker Plugin. Keep Track of Time!
​The time counter can be a very helpful feature when creating websites as people often have to keep track of time and count it. That’s why we want to offer you our plugin named Timetracker that would be useful in many ways.
Notice Our website uses cookies, which are necessary for its functioning and required to achieve the purposes illustrated in the privacy policy. By closing this banner you agree to the use of cookies.