Our team is constantly working with various web frameworks, both new ones, which have just appeared on the IT market, and old ones that have already gained a certain reputation. We test such solutions, try to better or adapt them, and then we share our experience with you. This time we're going to discuss popular Angular dialog windows and our attempts to improve them.
We’ll explain to you how to implement a dialog window in the most efficient way. You'll find a lot of details on Angular, read how to open dialogs without file size increasing, and so on.
AngularJS or Angular?
AngularJS has a pretty impressive history that goes back over 10 years (since 2009). The framework was initially developed by Adam Abrons (who is no longer part of the project) and Mishko Hevery (who keeps improving the solution in question with the assistance of Google and its highly qualified employees).
If some web developers consider HTML “an enemy to fight against”, the creators of Angular.JS decided to take a different path. They expanded the possibilities of HTML syntax by introducing additional directives, which are one of the key features of AngularJS.
In addition, AngularJS developers believe that the code should be covered as much as possible with tests (in order to avoid future bugs). Therefore, the framework was initially friendly in writing tests.
And yet, despite a number of advantages, AngularJS had a few performance disadvantages (and not only performance ones). Therefore, in the spring of 2014, it was decided to completely update and improve the framework (so to speak, create AngularJS 2.0).
And since the new version, released in September 2016, was written in TypeScript and differed from the original one, it was renamed as Angular.
JavaScript or TypeScript?
As you already understood, AngularJS is a JS-based framework that greatly simplifies the process of creating web resources. The fact is that almost any web developer (possessing JS knowledge at least at the basic level) can use AngularJS in his work.
Angular, on the other hand, is written in TypeScript, which, although derived from JS, has its own distinctive features. In particular, TypeScript hasn't abandoned the inherent concepts of object-oriented languages. This approach makes it much easier to write complex programs; also, it's more convenient to maintain, scale, and test them.
Now let's move on to our example. During development, we, surely, have to deal with various modal dialogs (and non-modal dialogs). And sometimes we may encounter certain difficulties. Trying to solve such problems often leads to new web solutions. And you, too, can take advantage of the results of our efforts.
Let’s take a closer look at the issue.
Angular Dialog Box
Angular isn't a “dead” framework (figuratively speaking), developers continue to work hard on improving it by adding new features and elements to it. However, in some ways, its functionality differs from that offered by AngularJS. Among other things, let's pay closer attention to the dialog window (popup).
We propose to consider 2 popular ways to implement a dialog box, namely: angular2-modal and ngx-modal. What can they do?
What Can These Components Do?
The ability to open a dialog box directly
Resort to these components to open the dialog boxes with the indicated template from the component you require.
The whole implementation process is extremely simple: import the service you need and call the appropriate method to perform the action. This is usually enough to open a dialog box directly. If not, use a base component to wrap your template, then call the Open function (using its link).
It looks as follows:
//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
It is logical to assume the components of the dialog window should offer some basic configuration to manage it. Here are just a couple of key examples:
-
control of the size of the dialog box;
-
button to close, hide, or open it;
-
the chance to close the box by outside click;
-
and so on.
The purpose of all these configurations is to help you customize the dialog window to suit your needs.
It allows you to get a custom dialog box, which is a big advantage, isn't it?
What Do These Components Lack?
Customizable Angular dialogs are a good thing, but you shouldn't forget about some of the disadvantages of these components, namely...
Dialog boxes as dynamically created elements
As you already understood, some components require passing HTML templates to a specific function, while others serve to wrap the templates (as we wrote above).
Let’s take a closer look at each case.
-
You insert the dialog into your HTML code when called. But you should bear in mind that it’s not about a single (separate) element, and this fact goes against the concept of Angular apps.
-
So, you used the base dialog window component as a wrapper for the template, but thereby you increased the file HTML size (since the template immediately penetrates the code). As a result, the web page takes longer to load, which annoys the user. In addition, there is the problem of resetting data (after all, the dialog is just hidden, not deleted after it has been closed).
By wisely using the capabilities of Angular, you get the chance to dynamically insert elements into templates of other components. That is, a component instance is being created (and drawn) ONLY when the function has been called. And it gets removed on close (which can be customized as desired)
Data transmission
Besides, no one would mind the ability to transmit various kinds of data to the dialog box. Say, how about lines, arrays, objects, and more?
Ng2-dialog-window: Our Improved Solution
Our team successfully applied ng2-dialog-window (1st version); what's more, we managed to reduce the impact of the above-described disadvantages. And we're not going to relax our efforts! We'll keep working on bettering the solution.
A quick guide to using ng2-dialog-window
1) First, decide from which component you are going to call the dialog box. Connect Ng2DialogWindowService to it and call the openModal method.
constructor( private dialog: Ng2DialogWindowService, private viewContainer: ViewContainerRef) {
}
openModal() {
this.dialog.openModal(this.viewContainer, {component: YourDialogWindowComponent})
}2) Add your dialog window component to the entryComponents
@NgModule({
//...
entryComponents: [
YourDialogWindowComponent
],
})3) Now is the time to extend your component from Ng2DialogWindowComponent. Such a step would help you inherit base methods; therefore, you'll be able to use ng2-dialog-window-component tag to wrap the template.
P.S. We guess Angular doesn't have an easier way to inherit other components styles. Let us know if you consider us wrong (of course the situation could have changed for the better since this article was written).
@Component({
selector: 'my-dialog-window',
template: '<ng2-dialog-window-component><!-- Body of dialog window --></ng2-dialog-window-component>'
})
export class YourDialogWindowComponent extends Ng2DialogWindowComponent {
}If you need more details, click here and read the documentation at length.
Summary
We showed you some Angular dialog box examples and described our experience with them and their adaptation. And you’re welcome to take full advantage of these components; maybe you can offer some bettering too, can’t you?
