Angular中的HTMLDialogElement可以通过使用Dialog Service来实现模态对话框。以下是一个简单的示例：

在component.ts中，导入Dialog Service并调用open()方法来打开模态对话框：

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {

  constructor(public dialog: MatDialog) { }

  openDialog() {
    const dialogRef = this.dialog.open(DialogComponent);

    dialogRef.afterClosed().subscribe(result => {
      console.log(`Dialog result: ${result}`);
    });
  }

}

在component.html中，使用元素绑定openDialog()方法：

Open Dialog

最后，在Dialog Component中定义模态对话框的内容。以下是一个示例：

import { Component } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';

@Component({
  selector: 'app-dialog',
  template: `
    
Dialog Title
    
      
Dialog content goes here.
    
    
      Close
    
  `,
})
export class DialogComponent {

  constructor(public dialogRef: MatDialogRef) { }

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

}

使用以上方法，您可以通过@angular/material库中的Dialog Service实现模态对话框。