‘oaso712024, 11109 How to Show a Modal Dialog in Angular | HackerNoon Discover Anything @ Login { Read NI write] AQ = WMongoDB. in the generative Ar xevelution s 10,604 reads 10,604 reads How to Show a Modal Dialog in Angular by Developer Partners August 18th, 2023 gee TAR TAU CX: Col | Dialog in Angular © AMMEN = meme ©) audio Presented by @MongoDB ‘nips: tackemoon.convhowte-show-a-modal-dalogin-angular wn‘oaso712024, 11109 How to Show a Modal Dialog in Angular | HackerNoon Using modal dialogs in web applications is fairly common. Whether you want to edit a record ina table without navigating to a different page, look up some data, or just show a warning message to your users, using a modal dialog may be a great user experience. Unfortunately, doing that is not very easy in Angular without a third-party library. It requires writing some non-trivial code and understanding of the internal mechanisms of the Angular framework. That is the reason why we developed a library at Developer Partners for showing modal dialogs in Angular. We are going to use our library in this article. 41. Install the Library We will have to install our @developer-partners/ngx-modal-dialog library via NPM and include that in our Angular modules to be able to use it. Here is the NPM command to install it: npm install @developer-partners/ngx-modal-dialog Next, we have to include it in the Angular modules where we have to use modal dialogs. Our demo application is very small, it has only one module called AppModule. We have to include ModalModule from the library in the imports array of our AppModule Angular module: nips: tmackemoon.convhowte-show-a-modal-dalogin-angular an7‘040712024, 11:09 How to Show a Modal Dialog in Angular | HackerNoon Poa t ee aa Canny ime es bcu an Tee a OCR Ce ee Sec Pe Ca ane wana AppRoutingModule } fron ‘./app-routing.mod ee, ae Peotsticy Tet Pec caee Deere ) We are all set. We can start using the modal dialog component in our application, 2. Show a Modal Dialog As mentioned before, we are going to show our modal dialog when we want to add or edit a book in our list of books. Let's first create a component where we are going to show the list of books. We are going to create a new Angular component and call it BookListComponent. This is the content of the BookListComponent Typescript class: hitps:itackemaon.comvhows-to-show-a-modalialogin-angular an7How to Show a Modal Dialog in Angular | HackerNoon ‘040712024, 11109 eee Our BookListComponent class uses a hardcoded list of books as the data to show in our table for simplicity. It also needs the ModalService Angular service from the ngx-modal-dialog library to be able to show the modal dialogs that is why we injected it into our constructor. Next, we will create the HTML file for BookListComponent where we will show the list of books in an HTML table: hitps:itackemaon.comvhows-to-show-a-modalialogin-angular an7‘040712024, 11:09 How to Show a Modal Dialog in Angular | HackerNoon The HTML code above is pretty simple. It show the list of books in a table. It also has a button called “Add New Book". This is what the UI looks like so far: When the "Add New Book" button is clicked, it calls the createBook function in our Typescript class. The createBook function shows the modal dialog for adding a new book to our table. This is the Typescript code of the createBook function: hitps:itackemaon.comvhows-to-show-a-modalialogin-angular snr‘0410712024, 11:09 How to Show a Modal Dialog in Angular | HackerNoon oe ere ts nt Bresso Sere as The function that shows the modal dialog for addi The createBook function shows the modal dialog by calling the show function of the ModalService class. The show function takes 2 parameters: the class of the Angular component to show inside the modal dialog and the options of modal dialog which are the settings of the dialog such as the title, size, position, and a few other things. The modal dialog needs an Angular component to show in its body. Without that component, our modal dialog would be just an empty panel overlaying the screen. That component is CreateEditBookComponent which is the first parameter of the show function in the screenshot above. The CreateEditBookComponent Angular component is going to be responsible for both adding and editing books. We will start by working on the code for adding new books. Here is the HTML code of the CreateEditB0okComponent which has only a few fields for entering the ID and title of the book we want to create and has buttons for closing the dialog and saving the data: hitps:itackemaon.comvhows-to-show-a-modalialogin-angular en7How to Show a Modal Dialog in Angular | HackerNoon ‘040712024, 11:09 freemen? This is what the modal dialog UI looks like: Here is the Typescript code of the CreateEdit0okComponent component hitps:itackemaon.comvhows-to-show-a-modalialogin-angular m7‘040712024, 11:09 How to Show a Modal Dialog in Angular | HackerNoon Ss ‘Angular component for adding new books to the list The CreateEdit80okComponent component uses an Angular service called ModalReference from the ngx-modal-dialog library. We use that service for interacting with the modal dialog where our component is placed such as closing the modal or subscribing to its events. We simply close the modal dialog in the cancel function in the screenshot above. We call the cancel function when the "Cancel" button from HTML is clicked. When we click the "Save" button in the HTML code, it submits the form which calls the saveData function. In the saveData function, we close the modal dialog just like in the cancel function but we also pass the book property to it that contains the data for adding a new book to our list. The ModalReference service is a generic type. When we call the closeSuccess function of the ModalReference service, we have to pass an object of the same type as its generic parameter. In our case, it's a Typescript interface called Book. The parameter that we pass to the closeSuccess function is passed back to the component that created the modal dialog by calling the show function of the ModalService class. hitps:itackemaon.comvhows-to-show-a-modalialogin-angular en7‘040712024, 11:09 How to Show a Modal Dialog in Angular | HackerNoon Newly created book passed back to BookListComponent When the call the closeSuccess function of the ModalReference service, it closes the modal dialog and triggers an RxJS event passing the newly create book to the subscribers of that event. In the screenshot above, the newBook parameter of our callback function is the newly created book that we received from the modal dialog, so we simply add it to our books array to show it in the UL. 3. Passing Data to Modal Dialogs There are some cases where you need to pass some data to modal dialogs. For example, if we want to edit a book from the list, we can pass the book record that we want to edit to the modal dialog to have the initial data that we want to modify, Let's start by adding a button to the table rows for editing the row dat: hitps:itackemaon.comvhows-to-show-a-modalialogin-angular eurHow to Show a Modal Dialog in Angular | HackerNoon ‘040712024, 11:09 This is what the UI looks like with the Edit button in each row of the table: The editBook function has almost the same code as the createBook function with just one important difference. It passes the book that we want to edit to the modal dialog by using the model property of the of the dialog options. hitps:itackemaon.comvhows-to-show-a-modalialogin-angular s0n7How to Show a Modal Dialog in Angular | HackerNoon ‘040712024, 11:09 pets ments erste eet Cees Cree eae encore orn 3 Poses a ersten re Deere Deere omer The function that shows the modal The parameter that we pass to the modal dialog using the model property becomes available in the ModalReference service in the component used inside the dialog via its config.model property. Deere ae eco a| Pe ntece sey ok paranreter in the modal dialo In the screenshot above, we are copying the passed parameter and assigning it to the book property of the CreateEditBookComponent component. The model property of ModalReference.config object is passed by reference, so any changes we make in the properties of that object will be reflected in the table where we show the list of books. The reason why we copy it is to not modify the row in the table until the user clicks the "Save" button. If the user clicks the "Cancel" button, the table data will not be updated. hitps:itackemaon.comvhows-to-show-a-modalialogin-angular 7‘0410712024, 11.08 How to Show a Modal Dialog in Angular | HackerNoon This is what the Edit Book modal dialog looks like: Ulof the Edit Book modal dialog Conclusion Building a modal dialog for Angular from scratch is not easy, but it is much easier with our modal dialog library. We went through how to set up the library and use it for showing modal dialogs in your project. We went through most basic use cases and features of the dialogs, but the @developer-partners/ngx-modal-dialog library has a lot of other features that you may find useful in your real projects. Also published here. Please follow the link below to learn more about it: @developer-partners/ngx-modal-dialog In case if you would like to show a nice loading spinner in your modal dialogs, please see our article about building a loading spinner in Angular: How to Create a Loading Spinner in Angular ‘tips trackemoon.convhawto-show-2-modal-dalog-n-angular|‘040712024, 11:09 How to Show a Modal Dialag in Angular| HackerNoon LOADING - +. comments & more! About Author Developer Partners @developerpartners Dynamic software dev company empowering businesses & individuals. Stay tuned for insights & success stories. Read My Stories Learn More Comments TOPICS programming #web-development —#angular Htypescript_ — #web-app-development —_#modal-dialog #angular-modal-dialog _#good-company ‘nips: tackemoon.convhowte-show-a-modal-dalogin-angular 1387‘oaso712024, 11109 How to Show a Modal Dialog in Angular | HackerNoon Languages © English S fa © Tiéng viet @ Portugués ° Bae () Francais © Espafiol O TEA THIS ARTICLE WAS FEATURED IN... Permanent onArweave Terminal @Lite RELATED STORIES Register Now! How to Use the Javascript Slice Method visit Mongo DB #Sponsored bylggy 28920,3970 How to Access the Dark 10 Useful JavaScript Web: Methods for Android Functions to Learn and PC by thedailytechtaa Ave28, 2022 by legathacks 39920,1970 hitps:itackemaon.comvhows-to-show-a-modalialogin-angular sanz‘oaso712024, 11109 10 Cool Angular Material Admin Dashboard Templates byana 2n33,2022 How to Show a Modal Dialog in Angular | HackerNoon 13 Angular App Optimization Tips for Frontend Developers byangrynerds Apr32,2020 Join HackerNoon Latest technology trends. Customized Experience. Curated Stories. Publish Your Ideas ABOUT Careers Contact Cookies Emails Help Privacy Sitemap Shareholders Startups 2023 nips: tmackemoon.convhowte-show-a-modal-dalogin-angular READ Archive Categories Image Gallery Leaderboard Leam Repo Noonification Signup Tech Beat Tech Brief asi7‘oaso712024, 11109 How to Show a Modal Dialog in Angular | HackerNoon Testimonials Terms Updates WRITE Distribution Editing Protocol Editor Tips Guidelines Help New Story Perks Process Subscribers Story Templates Testimonials Why Write ‘tips tackemoon.convhawte-show-2-modal-dalog-n-angular| Tech Tags Terminal Reader Top Stories BUSINESS Billboard Book Demo Meeting Business Blogging Case Studies Company Directory Crypto Directory Live Business Posts Newsletters Niche Targetting Partnerships Startup Package Writing Contests ten‘oaso712024, 11109 How to Show a Modal Dialog in Angular | HackerNoon THE HACKERNOON NEWSLETTER HACKERnNOON nips: tmackemoon.convhowte-show-a-modal-dalogin-angular air