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

    Popular Angular Dialog Windows and How We Tried to Improve Them

    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 vs Angular

    AngularJS started back in 2009 and was the result of a joint work of Mishko Hevery and Adam Abrons. And though Abrons has already left the project, Hevery, a Google employee, continues its development (along with other members of the Google team). 

    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 the TypeScript programming language, which, although derived from JS, has its own distinctive features. In particular, TypeScript implements many of the concepts inherent in object-oriented languages. It makes writing large, complex programs easier, and then it's more convenient to maintain, scale, and test them.

    Why should you choose Ruby on Rails to start a new web project? Read our article to find out!

    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

    As you now know, 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 and ngx-modal. What can they do?

    What can these components 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 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

    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.

    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 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’s not a separate component, and such a 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’ve 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 detail here.

    Summary

    We showed you some Angular dialog box examples and described our experience with them and their adaptation. Feel free to use, contribute, create issues. Let’s make these components better together!

    Do you have any questions? We’re happy to answer them!

     

    Next Posts
    7c5a498bcb2ed3c81303f9531c1e0f23889b54e7 GOBUTTON Plugin. Diversify the Waiting Process
    Usually, people don’t like to wait and do “nothing”....
    Bd654a87439a6c2daa5fcd146f9b25ad7e1ab288 Rails Application Template for Creating...
    Rails Application Template. A basic template for creating...
    B8ae08715ca65ef26850f8ed792ec77c5f6c4fa2 Timetracker Plugin. Keep Track of Time!
    ​The time counter can be a very helpful feature when...