I want to show a dialog box in angular to confirm a delete action but the box does not appear and it appends to the end of the page here is my dialog component ts file:

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(); 
    })
  }
}

Here is html file of dialog component:

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

And here is another component that calls the dialog component:

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);
        })
    }
}