Subscribe Us

Angular Material Dialog Tutorial


Angular Material Dialog Tutorial

Angular Material Dialog


Introduction


Alright guys in this tutorial we are going to take a look at dialogs in angular material.

A dialog is a type of modal a window that appears in front of the app content to provide information or ask for information.The usage of a dialog is very similar to that of the snack bar the component we looked at in the last post. So this post should be pretty straight forward if you've understood how a snack bar works alright.

Description


Let's get started first step import MatDialogModule and add it to the material array.

import { NgModule } from '@angular/core';
import
{
    MatButtonModule,
    MatButtonToggleModule,
    MatSnackBarModule,
    MatDialogModule
}
from '@angular/material'

const MaterialComponents=
[   
    MatButtonModule,
    MatButtonToggleModule,
    MatSnackBarModule,
    MatDialogModule   
];

@NgModule({
 imports: [MaterialComponents],
 exports: [MaterialComponents]
})
export class MaterialModule { }


Next in the HTML create a button that can open the dialog so button add the attribute mat raised button add a click handler which is open dialog and then the button text is going to be an open dialog.

 <button mat-raised-button (click)="openDialog()">
  Open Dialog
</button>

Now let's define the open dialog method to be able to open the dialog we need the MatDialog service so import MatDialog from angular/material. After importing we need to inject it so constructor let's go with public dialog of type MatDialog and then we can define the open dialog method within the body, we are going to have this.dialog.open() and the open method on dialog accepts two parameters the first parameter is a component and the second parameter is optional configuration to pass in a component parameter.


Let's first create it so in the terminal we use angular CLI and run the command
ng g c dialog-example --skip tests
and I'm also going to skip the test files the command creates a folder for the component and adds it to the app module but a component that is used for a dialog also has to be included in the entry components array.

entryComponents:[DialogExampleComponent]

So over here dialog example component now we can pass this component as our parameter.

 import { Component } from '@angular/core';
import {MatDialog} from '@angular/material'
import { DialogExampleComponent } from './dialog-example/dialog-example.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor(public dialog: MatDialog){}

  openDialog(){
    this.dialog.open(DialogExampleComponent);
  }
}


All right let's go back to the browser and test this out if I click on the button a dialog pops up with the content dialog example works and this is the HTML corresponding to our dialog example component.



Right now we just have a paragraph tag but there are several directives meant specifically to structure the dialog content let's use them instead so envious code I'm going to open the file dialog-example.html

First, we specify a dialog title using the mat dialog title directive so I'm going to add an h2 tag and the the directive is going to be mat-dialog-title this is going to be session timeout.

Next for the content we have a mat dialog content so this is going to be mat-dialog-content and the text is going to be you will be logged out due to inactivity.

Next for the dialog the action we have the mat-dialog-actions. let's create two buttons one to stay  signed in and want to log out so keep me logged in or log out now on both these buttons if you want the click event to close the dialog we need to add the mat-button mat-dialog-close. So on both the buttons mat-dialog-close.

<h2 mat-dialog-title>Session timeout</h2>
<mat-dialog-content>You will be logged out due to inactivity</mat-dialog-content>
<mat-dialog-actions>
  <button mat-button mat-dialog-close>
    Keep me logged in
  </button>
  <button mat-button mat-dialog-close>
    Log out
  </button>
</mat-dialog-actions>


Alright let's test this out if you go back to the browser and I click on the button we have the model with the title content and the buttons when I click the button it closes the dialog as well now we have two buttons intended for different purposes how would we know whether to log the user out or keep them signed in.



When the dialog closes on the button click we can do that using the after closed observable which conveniently returns a result so back in vs code in the component the class first create a reference to the dialog so let dialog ref is going to be this.dialog.open. 

Now we can subscribe to the observable dialog ref the dot after closed dot subscribe we get a result and let's simply log that to the console dialog result is result finally we assign a value to the mat dialog the closed directive which is accessed as the result so in the HTML for the dialog on keeping me logged in button mat dialog closed is going to be equal to true for the first case and false for logout.

openDialog(){
    let dialogRef=this.dialog.open(DialogExampleComponent);
    dialogRef.afterClosed().subscribe(result=>{
      console.log('Dialog result', result);
    })
  }

 <h2 mat-dialog-title>Session timeout</h2>
<mat-dialog-content>You will be logged out due to inactivity</mat-dialog-content>
<mat-dialog-actions>
  <button mat-button mat-dialog-close mat-dialog-close="true">
    Keep me logged in
  </button>
  <button mat-button mat-dialog-close mat-dialog-close="false">
    Log out
  </button>
</mat-dialog-actions>

Let's go back to the browser and test this out I'm going to open the console click on open dialog and click on keep me logged in. You can see that it says dialog result true and click on logout it says dialog result false.

 


So in the subscription method you can have the code that checks for the result if the result is equal to true keep them signed in and if the result is equal to false logout.

The final point to discuss with dialog are passing in the data to the dialog component and there are a  couple of steps so let's go over each of them.

The first step specify the data as the second parameter to the dialog  an open method so this is going to be an object the key is going to be data which in turn, is going to be an object. I'm going to pass a name called Manoj so this is the second argument to the open the method.

openDialog(){
    let dialogRef=this.dialog.open(DialogExampleComponent, {data: {name: 'Manoj'}});
    dialogRef.afterClosed().subscribe(result=>{
      console.log('Dialog result', result);
    })
  }

Next open the component class for the dialog example component so dialog-example.component.ts to access the data in the dialog. The component we have to use the mat dialog data injection token so first import Inject from angular/core.

Next import MAT_DIALOG_DATA from angular/material and then we inject it in the constructor so a constructor is going to be at inject and we are injecting MAT_DIALOG_DATA and then we say public data of type any. So we are now making the dialog component capable of receiving any type of data.

import { Component, OnInit, Inject  } from '@angular/core';
import {MAT_DIALOG_DATA} from '@angular/material'

@Component({
  selector: 'app-dialog-example',
  templateUrl: './dialog-example.component.html',
  styleUrls: ['./dialog-example.component.scss']
})
export class DialogExampleComponent implements OnInit {

  constructor(@Inject (MAT_DIALOG_DATA) public data:any) { }

  ngOnInit() {
  }

}


Now in the dialog component HTML we can simply interpolate the data object so in mat-dialog-content. I'm going to add Hi {{data.name}}.

<h2 mat-dialog-title>Session timeout</h2>
<mat-dialog-content>Hi {{data.name}} You will be logged out due to inactivity</mat-dialog-content>
<mat-dialog-actions>
  <button mat-button mat-dialog-close mat-dialog-close="true">
    Keep me logged in
  </button>
  <button mat-button mat-dialog-close mat-dialog-close="false">
    Log out
  </button>
</mat-dialog-actions>

If you now go back to the browser and click on the open dialog you can see that content says Hi, Manoj, you will be logged out due to inactivity.



So we can pass data to the dialog component now if you want to specify height and width for the dialog, it can be passed into the configuration object there are a bunch of properties you can use based on your requirement so I leave that for you guys to explore browse the API tab in the documentation and you will find everything you need.

Summary


Alright I hope you now have a good understanding of how to work with dialog in angular  material thank you guys for reading don't forget to subscribe and from the next post let's get started with data tables.


Post a Comment

0 Comments