Close Angular Material Dialog

Question

Hi I am using Angular Material dialog. I want when user clicks Cancel button it should gets closed. Employee Form Thanks

Jaimin Shethiya · Answer

Hello Ramco, user-dialog.component.html User Detail Name: City: Cancel Ok user-dialog.component.ts import { Component, Inject } from '@angular/core'; import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; import { User } from './user'; @Component({ templateUrl: './user-dialog.component.html', }) export class UserDialogComponent { constructor( public dialogRef: MatDialogRef , @Inject(MAT_DIALOG_DATA) public data: User, ) { } onCancelUserDialog(): void { this.dialogRef.close(); } } app.module.ts import { UserDialogComponent } from './user-dialog.component'; @NgModule({ declarations: [ AppComponent, UserDialogComponent ], providers: [ {provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: { height: '200px', width: '250px', autoFocus: true }} ], Thanks

Mayooran Navamany · Answer

HTML Template : Add a "Cancel" button within your form. Use Angular's (click) event binding to call a method in your component to handle the dialog close action. Employee Form Cancel Save Component : Inject MatDialogRef in the constructor of your component and define the onCancel method to close the dialog. import { Component } from '@angular/core'; import { MatDialogRef } from '@angular/material/dialog'; import { FormBuilder, FormGroup } from '@angular/forms'; @Component({ selector: 'app-employee-form-dialog', templateUrl: './employee-form-dialog.component.html', }) export class EmployeeFormDialogComponent { empForm: FormGroup; constructor( private fb: FormBuilder, public dialogRef: MatDialogRef ) { this.empForm = this.fb.group({ // Define your form controls here }); } onCancel(): void { this.dialogRef.close(); } Save(): void { // Handle save logic } } In this setup: The MatDialogRef service is used to control the dialog from within the component. The onCancel method calls the close method on dialogRef , which closes the dialog. The form is defined using Angular's Reactive Forms ( FormBuilder and FormGroup ).