Quiero mostrar un cuadro de diálogo en angular para confirmar una acción de eliminación, pero el cuadro no aparece y se agrega al final de la página. Aquí está el archivo ts de mi componente de diálogo:

 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; export class DeleteBoxComponent implements OnInit { constructor(private dialogRef: MatDialogRef<DeleteBoxComponent>, @Inject(MAT_DIALOG_DATA) public data: CBookModel, private service: BookService) { } onNoClick(){ this.dialogRef.close(); } onYesClick(){ this.service.delete(this.data.id).subscribe(response => { this.dialogRef.close(); }) } }

Aquí está el archivo html del componente de diálogo:

 <div class="mat-container position-relative"> <h1 mat-dialog-title>DELETE</h1> <mat-dialog-content class="mat-typography"> <p>Are you Sure you want to delete "{{data.title}}"</p> </mat-dialog-content> <mat-dialog-actions> <button mat-button (click)="onNoClick()">No</button> <button mat-button (click)="onYesClick()">Yes</button> </mat-dialog-actions> </div>

Y aquí hay otro componente que llama al componente de diálogo:

 import { DeleteBoxComponent } from './../delete-box/delete-box.component'; import { MatDialog } from '@angular/material/dialog'; export class BooksComponent implements OnInit { constructor(private service: BookService,public router:Router, public dialog: MatDialog) { } onClickDelete(book: CBookModel) { const dialogRef = this.dialog.open(DeleteBoxComponent, {width: '250px',backdropClass: 'backdropBackground', data: book}); dialogRef.afterClosed().subscribe( Response =>{ this.service.getAll() .subscribe(data => this.books = data); }) } }