Create Dialog box component

app.component.ts

openDialog(row_obj:any): void {
let dialogRef = this.dialog.open(DialogBoxComponent, {
width: '250px',
data: { name: this.name }
});

dialogRef.afterClosed().subscribe(result => {
this.name = result;
if(this.name!=undefined){
if(this.name==""){
Swal.fire('Username cannot be empty..!')
}else{
row_obj.userName=this.name
const newUsersArray = this.USER_DATA;
this.myDataArray = [...newUsersArray];
Swal.fire('Updated successfully..!')
}
}
});

}

dialog-box.component.html

<h1 mat-dialog-title>Row Action :: Update</h1>

<div mat-dialog-content>
<p>Update Name</p>
<mat-form-field>
<input matInput [(ngModel)]="data.name">
</mat-form-field>
</div>

<div mat-dialog-actions>
<button mat-button (click)="onNoClick()">Cancel</button>
<button mat-button [mat-dialog-close]="data.name"
cdkFocusInitial>Update</button>
</div>

dialog-box.component.ts

constructor(public dialogRef: MatDialogRef<DialogBoxComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) { }
  
onNoClick(): void {
this.dialogRef.close();
}

Gracias por la info!