In this article, I will cover how to implement
Modal Window/Dialog Box in Angular 4 using the “angular/material”
and TypeScript.
What Is Angular dialog? A dialog is opened after clicked on open method with the component class. We are using the MatDialogRef provides is used to handle the opened dialog box and also for close the dialog box.
What Is Angular dialog? A dialog is opened after clicked on open method with the component class. We are using the MatDialogRef provides is used to handle the opened dialog box and also for close the dialog box.
Syntax
-
let
dialogRef = dialog.open(UserComponent,
{
height: '300px',
width: '400px',
});
The example in detail as given below-
import
{Component, Inject}
from '@angular/core';
import
{MatDialog, MAT_DIALOG_DATA}
from '@angular/material';
@Component({
selector: 'mydialog',
templateUrl: 'mydialog.html'
})
export
class DialogExample
{
constructor(public
dialog: MatDialog)
{}
openUserDialog() {
this.dialog.open(UserDialog,
{
height:'400px',
width:'400px'
});
}
}
And
@Component({....
})
export
class UserDialog
{
constructor(@Inject(MAT_DIALOG_DATA)
public data:
any) {
}
}
And
<button
md-button
(click)="openUserDialog()">Open
dialog</button>
Result looks like - https://embed.plnkr.co/XO7oPs/
I hope you are enjoying with this post!
Please share with you friends. Thank you!!
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|
