Close Angular Material Dialog

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).

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