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 >
  <h1 mat-dialog-title>DELETE</h1>
  <mat-dialog-content >
    <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);
      })
    }

image

CodePudding user response：

Based on your screenshot I think you have not configured Material styles.
Follow Getting Started and it will be set up.