typescript - this.dialogRef.close is not a function Angular 19 - Stack Overflow

I'm trying to create a dialogform inside my main component using angular 19, i open the dialog but the close button is not working and the console log show me the following error: this.dialogRef.close is not a function, this is mycode, i'm trying everything to make this work...thanks in advance for any suggestion

import { Component, OnInit,inject,Inject } from '@angular/core';
import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
import {MatButtonModule} from '@angular/material/button';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';
import { AsyncPipe } from '@angular/common';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import {
  MAT_DIALOG_DATA,
  MatDialog,
  MatDialogActions,
  MatDialogClose,
  MatDialogConfig,
  MatDialogContent,
  MatDialogModule,
  MatDialogRef,
  MatDialogTitle,
} from '@angular/material/dialog';
export interface EncounterGrid {
  ID: number;
  Name: string;
  HP: number;
  AC: number;
  Initiative: number;
  Type: string;
}
@Component({
  selector: 'app-add-monster',
  imports: [
    FormsModule,
    MatFormFieldModule,
    MatInputModule,
    MatAutocompleteModule,
    ReactiveFormsModule,
    AsyncPipe,
    MatDialogModule,
    MatDialogTitle,
    MatDialogContent,
    MatDialogActions,
    MatDialogClose,
    MatButtonModule
  ],providers: [
    {
      provide: MatDialogRef,
      useValue: {}
    }, { provide: MAT_DIALOG_DATA, useValue: {} }
 ],
  templateUrl: './add-monster-dialog.html',
})
export class AddMonsterComponent {
  constructor(@Inject(MAT_DIALOG_DATA) public data: any, public Dialog: MatDialog){
  }
  readonly dialogRef = inject(MatDialogRef<AddMonsterComponent>);
  onNoClick(): void {
    this.dialogRef.close();
  }
}

I'm expecting the modal dialog will close on the OnNoClick event

I'm trying to create a dialogform inside my main component using angular 19, i open the dialog but the close button is not working and the console log show me the following error: this.dialogRef.close is not a function, this is mycode, i'm trying everything to make this work...thanks in advance for any suggestion

import { Component, OnInit,inject,Inject } from '@angular/core';
import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
import {MatButtonModule} from '@angular/material/button';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';
import { AsyncPipe } from '@angular/common';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import {
  MAT_DIALOG_DATA,
  MatDialog,
  MatDialogActions,
  MatDialogClose,
  MatDialogConfig,
  MatDialogContent,
  MatDialogModule,
  MatDialogRef,
  MatDialogTitle,
} from '@angular/material/dialog';
export interface EncounterGrid {
  ID: number;
  Name: string;
  HP: number;
  AC: number;
  Initiative: number;
  Type: string;
}
@Component({
  selector: 'app-add-monster',
  imports: [
    FormsModule,
    MatFormFieldModule,
    MatInputModule,
    MatAutocompleteModule,
    ReactiveFormsModule,
    AsyncPipe,
    MatDialogModule,
    MatDialogTitle,
    MatDialogContent,
    MatDialogActions,
    MatDialogClose,
    MatButtonModule
  ],providers: [
    {
      provide: MatDialogRef,
      useValue: {}
    }, { provide: MAT_DIALOG_DATA, useValue: {} }
 ],
  templateUrl: './add-monster-dialog.html',
})
export class AddMonsterComponent {
  constructor(@Inject(MAT_DIALOG_DATA) public data: any, public Dialog: MatDialog){
  }
  readonly dialogRef = inject(MatDialogRef<AddMonsterComponent>);
  onNoClick(): void {
    this.dialogRef.close();
  }
}

I'm expecting the modal dialog will close on the OnNoClick event

• angular
• typescript
• angular-material
• angular19

Share Improve this question Follow asked Feb 1 at 11:37 Fallingstar WarriorFallingstar Warrior 3544 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

You're overriding the MatDialogRef with an empty object {} that lacks the close() method. Remove the MatDialogRef from the providers array in the module and use constructor injection

constructor(
public dialogRef: MatDialogRef<AddMonsterComponent>,
@Inject(MAT_DIALOG_DATA) public data: any,
public dialog: MatDialog
) {}

onClose(): void {
 this.dialogRef.close();
}