Dialog box appear in bottom of page in angular

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




Continue reading...