Angular Material 8 | Implement Dialog Modal and Pass Data between Parent Component Tutorial by Example

Dialog component is used to show HTML content in floating over the content box. The dialog is used to create a focused area on-screen generally used for data actions like Create, Update data or show alerts and confirmation.

Angular Material also provides Dialog web component which can be easily used and integrated into Angular application. There are a number of options available for Dialog Modal configurations.

Here we will create a new Angular application then install Material to demonstrate How to add Angular Material Dialog in Application with options available also discuss on How to pass data between the parent page and Dialog component.

Let’s start the implementation

Here we are using v8.0.1 of Angular CLI to create a new project but this article is compatible with previous versions of Angular starting v6.

Create a new Angular Project

First, using Angular CLI we will create a new Angular project by running following NPM command.

Enter project root

If you are using Visual Studio Code, then open project in using below command

 

Install Angular Material in Project

To use Angular material, we need to install and configure an Angular project to use its components. let’s go through some quick steps to the plugin.

Install packages

Run following NPM command to install @angular/material, @angular/material and @angular/material required as dependencies.

The version of material and dependencies should be at the same level, you can check the version of @angular/core in package.json if its something like 7.2.15 then install packages with @7 otherwise some console errors will creep in.

Import BrowserAnimationsModule in Module

Angular Material is known for beautiful animations like ripple effects 😀 so just go to app’s main module file then import BrowserAnimationsModule then add in imports array.

Add Material Theme

Components used in the project are styles using CSS available in the material CSS theme file, so just add the following theme file link in styles.css available at the project root.

you can use any one of these available themes.

That’s it … we are done with Angular material configuration.

Create a Component for Dialog

A dialog is also a separate component which will have its own template and component class. The only difference is we need to add in entryComponent array in app’s module as Dialog is loaded dynamically after app load.

Run following ng command to create a DialogModelExample component

Add Material Modules

In our demo, we will use Dialog, Input Field, Form and Button modules. In Angular Material, we need to add these modules in the app’s module file.

Now open app.module.ts file then add following modules in imports array.

Here we also added DialogModalExampleComponent in declarations and in entryComponents array as this component will be loaded dynamically.

Open Dialog from Component

In the app component, we will add an Input field and a button to open Dialog. This will pass Input value to opened Dialog and show value in it.

Update app template and component class with the following code:

In the above template, we have an Input field and a button Open Dialog which calls openDialog() method

Using MatDialog we are getting dialog template to update it with DialogModalExample component. Its open method will open Dialog with added options and data passed.

We subscribed to afterClosed() method to get a response from Dialog after it is closed.

Update DialogExample Component

Now update DialogExampleComponent with following template HTML and component class

In the dialog-modal-example.component.html file add the following template that will have an input field to get a new value which will be passed to afterClose() subscription method in the parent component.

Next, update the dialog-modal-example.component.ts file with the following code:

In the above code, we are getting data passed from parent using MAT_DIALOG_DATA and passing back new value form Dialog to parent using close() method’s data property.

Conclusion: In the above article, we discussed how to implement Angular Material Dialog component in Angular app using a dialog component and also discussed how to pass data from parent to dialog and send back data from dialog to parent component using MatDialog class methods.

 

 

 

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

Leave a Reply

avatar
  Subscribe  
Notify of