The below steps can be used to show dialog in an angular material project.
1. create angular project and add angular material package
ng new myapp
ng add @angular/material
2. add material design dialog module into app's module file app.module.ts
3.Create dialog body component for displaying
First creating three files in the project as below
mydialog.component.ts
mydialog.componen.html
mydialog.component.css
mydialog.component.ts handles the data communication with dialog, the code is shown below
1. create angular project and add angular material package
ng new myapp
ng add @angular/material
2. add material design dialog module into app's module file app.module.ts
import {MatDialogModule} from '@angular/material';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
MatDialogModule
],
3.Create dialog body component for displaying
First creating three files in the project as below
mydialog.component.ts
mydialog.componen.html
mydialog.component.css
mydialog.component.ts handles the data communication with dialog, the code is shown below
import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-dialog',
templateUrl: 'mydialog.component.html',
styleUrls: ['mydialog.component.css']
})
export class MyDialogComponent implements OnInit {
ngOnInit(): void {
console.log('dialog opened')
}
}
mydialog.component.html contains the dialog body
<h2 mat-dialog-title>My dialog title</h2>
<mat-dialog-content>
<input matInput
placeholder="input description"
>
</mat-dialog-content>
<mat-dialog-actions>
<button class="mat-raised-button" (click)="close()">Close</button>
</mat-dialog-actions>
mydialog.component.css leaves as empty.
4. update app module file to import dialog component, and add it in entryComponents section
import {MatDialogModule} from '@angular/material';
import { MyDialogComponent } from './mydialog.component';
@NgModule({
@NgModule({
declarations: [
AppComponent,
MyDialogComponent
],
providers: [],
bootstrap: [AppComponent],
entryComponents:[MyDialogComponent]
})
Test the project with "ng serve", it should show the default angular page.
5. remove default content from app.component.html and add a html button element to open the dialog
<button mat-button (click)="openDialog()">Open dialog</button>
Update app.component.ts to implement openDialog method as below
import { Component } from '@angular/core';
import {MatDialog, MatDialogConfig} from '@angular/material';
import { MyDialogComponent } from './mydialog.component';
export class AppComponent {
title = 'myapp';
constructor(private dialog: MatDialog) {}
openDialog() {
const dialogConfig = new MatDialogConfig();
dialogConfig.disableClose = true;
this.dialog.open(MyDialogComponent, dialogConfig);
}
}
Set disableClose to true so users can not close the dialog just by clicking outside of the dialog.
Save and run the project, when clicking the open dialog button, it should show the below dialog. Note the dialog cannot be closed now when clicking close button.
Save and run the project, when clicking the open dialog button, it should show the below dialog. Note the dialog cannot be closed now when clicking close button.
6. close the dialog
Update mydialog.component.ts with a new close method
import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material';
import { Component, OnInit } from '@angular/core';
export class MyDialogComponent implements OnInit {
constructor(private dialogRef: MatDialogRef<MyDialogComponent>) {}
close() {
this.dialogRef.close('input value from user');
}
}
Test the project again, the dialog should be able to close.
7. passing data into dialog
MatDialogConfig object can be used to pass input data to dialog. Update mydialog.component.ts to add a new line to pass dialog title in dialogConfig.data object
openDialog() {
const dialogConfig = new MatDialogConfig();
dialogConfig.disableClose = true;
dialogConfig.data = {title: 'my material style'};
this.dialog.open(MyDialogComponent, dialogConfig);
}
Update mydialog component to receive input data:
import { Component, OnInit, Inject } from '@angular/core';
export class MyDialogComponent implements OnInit {
diaTitle: string;
constructor(private dialogRef: MatDialogRef<MyDialogComponent>,
@Inject(MAT_DIALOG_DATA) data) {
this.diaTitle = data.title;
}
}
Update mydialog.component.html to use the diaTitle for the dialog title
Update mydialog.component.html to use the diaTitle for the dialog title
<h2 mat-dialog-title>{{diaTitle}}</h2>
Test again, the title of my material style" should show.
8. collecting user input from dialog
First update app module .ts file to include form module
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {MatDialogModule} from '@angular/material';
import { MyDialogComponent } from './mydialog.component';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {FormsModule} from '@angular/forms';
@NgModule({
declarations: [
AppComponent,
MyDialogComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatDialogModule,
FormsModule
],
Then update app.component.ts to receive dialog output from afterClosed() method as below
userInput: string;
openDialog() {
const dialogConfig = new MatDialogConfig();
dialogConfig.autoFocus = true;
dialogConfig.hasBackdrop = true;
dialogConfig.disableClose = true;
dialogConfig.data = {title: 'my material style'};
const dialogRef = this.dialog.open(MyDialogComponent, dialogConfig);
dialogRef.afterClosed().subscribe(result => {
this.userInput = result;
});
}
Also update app.component.html to show the user output as below
<div>User input in dialog is: <span style="color: red;">{{userInput}}</span></div>
Then use ngModel two way bind to get input from dialog by update mydialog.component.html and mydialog.component.ts
mydialog.component.html
<h2 mat-dialog-title>{{diaTitle}}</h2>
<mat-dialog-content>
<input matInput [(ngModel)] ="diaInput"
placeholder="input description"
>
</mat-dialog-content>
<mat-dialog-actions>
<button class="mat-raised-button" (click)="close()">Close</button>
</mat-dialog-actions>
mydialog.component.ts
export class MyDialogComponent implements OnInit {
diaTitle: string;
diaInput: string;
constructor(private dialogRef: MatDialogRef<MyDialogComponent>,
@Inject(MAT_DIALOG_DATA) data) {
this.diaTitle = data.title;
}
ngOnInit(): void {
console.log('dialog opened')
}
close() {
this.dialogRef.close(this.diaInput);
}
}
Now testing the dialog, the user input will show after the dialog is closed.
