angular - アンカータグを使用しているときにマテリアルを使用して角度でダイアログをポップアップする方法はありますか?

Question

これは私のhtmlファイルです。

html ファイルには、2 つのアンカー タグがあります。1 つは編集用で、もう 1 つは詳細オプションの表示用です。どちらも他の編集および表示コンポーネントにリダイレクトされています。しかし、代わりに、マット ダイアログ ポップアップに編集および表示オプションを表示したいと考えています。助けてください。

    <div class="mat-elevation-z8" >
        <table mat-table [dataSource]="dataSource" class="table">    

          <ng-container matColumnDef="User Id">
            <th mat-header-cell *matHeaderCellDef> User Id </th>
            <td mat-cell *matCellDef="let element"> {{element.id}} </td>
          </ng-container>

          <ng-container matColumnDef="Name">
            <th mat-header-cell *matHeaderCellDef> Name</th>
            <td mat-cell *matCellDef="let element"> {{element.name}} </td>
          </ng-container>
  
          <ng-container matColumnDef="Email">
            <th mat-header-cell *matHeaderCellDef> Email </th>
            <td mat-cell *matCellDef="let element"> {{element.email}} </td>
          </ng-container>

          <ng-container matColumnDef="City">
            <th mat-header-cell *matHeaderCellDef> City </th>
            <td mat-cell *matCellDef="let element"> {{element.address.city}} </td>
          </ng-container>

          <ng-container matColumnDef="Edit">
            <th mat-header-cell *matHeaderCellDef> Edit </th>
            <td mat-cell *matCellDef="let element">
                <a class="action-link" [routerLink]="['/users/edit',element.id]">
                    <mat-icon class="mat-icon">edit</mat-icon></a>  </td>
          </ng-container>

          <ng-container matColumnDef="View">
            <th mat-header-cell *matHeaderCellDef> View </th>
            <td mat-cell *matCellDef="let element"> 
                <a class="action-link" [routerLink]="['/users/view',element.id]">
                    <mat-icon class="mat-icon">visibility</mat-icon></a> </td>
          </ng-container>
          <!-- <button mat-raised-button (click)="openDialog()">Pick one</button> -->
          <tr mat-header-row class="columns" *matHeaderRowDef="displayedColumns"></tr>
          <tr mat-row  class="rows" *matRowDef="let row; columns: displayedColumns;"></tr>
        </table>
      </div>

      <mat-paginator
      [length]="totalLenght"
     [pageSize]="5"
     [pageSizeOptions]="[5, 10]"
     >
</mat-paginator>

これは私のtsファイルです

import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator, PageEvent } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { UserService } from 'src/app/services/user.service';
//import { MatDialog } from '@angular/material/dialog';\
import { MatDialogConfig } from '@angular/material/dialog';
@Component({
  selector: 'app-view-user',
  templateUrl: './view-user.component.html',
  styleUrls: ['./view-user.component.scss']
})
export class ViewUserComponent implements OnInit {
  @ViewChild(MatSort) sort = new MatSort(); 
  @ViewChild(MatPaginator) paginator?:MatPaginator;
  constructor(private userService:UserService) { }
  displayedColumns=["User Id", "Name", "Email","City","Edit","View"];
   listUsers:any=[];
   dataSource:any;
   totalLenght:number=0;;

  ngOnInit(): void {
    this.userService.listUsers().subscribe(data=>{
      this.listUsers=data;
     this.dataSource = new MatTableDataSource<any>(this.listUsers);
     this.dataSource.sort = this.sort;
     this.totalLenght=this.listUsers.length;
    this.dataSource.paginator = this.paginator;
    })   
  }
  openDialog(){

  }
}

これは、ユーザーの詳細を追加、編集、および表示するために、アプリ ルーティング モジュールでそれぞれ指定されたルーティングです。

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AddItemComponent } from './components/add-item/add-item.component';
import { ListGridComponent } from './components/list-grid/list-grid.component';
import { AddUserComponent } from './users/add-user/add-user.component';
import { EditUserComponent } from './users/edit-user/edit-user.component';
import { ViewUserComponent } from './users/view-user/view-user.component';
import { View1userComponent } from './users/view1user/view1user.component';
const routes: Routes = [
{
  path:'users',
  children:[
    {
      path:'list',component:ViewUserComponent
    },
  
    {
      path:'add',component:AddUserComponent
    },
    {
      path:'edit/:id',component:EditUserComponent
    },
    {
      path:'view/:id',component:View1userComponent
    }
  ]
},
{
    path:'',component:ViewUserComponent  
},

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

最後に、これはサービスファイルです

import { HttpClient, HttpClientModule } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class UserService {
 baseUrl="https://jsonplaceholder.cypress.io/"; 

  constructor(private http:HttpClient) {
   }
   listUsers(){
     return  this.http.get(this.baseUrl+ 'users');
  }
  addUser(userObj:any){
    return this.http.post(this.baseUrl+'users',userObj)
  }
  viewUser(id:any){
    return this.http.get(this.baseUrl+ 'users/' + id);
  }
  updateUser(id:any, userObj:any){
    return this.http.put(this.baseUrl+'users/'+id ,userObj)
  }
}