Angular Material UI Dialog give data to dialog pop up

I'm making a delete confirmation dialog in Angular with Material Ui ( https://material.angular.io/components/dialog/overview). I'm following the logic from the documentation above. But I've run into some errors. I thought I could give some data from my list to my delete confirmation dialog but it seems I am going about it the wrong way. I will provide my code and the errors that I get. The user flow would be that a user can delete a skill --> delete confirmation dialog will pop up that needs the skill name --> after confirming it will delete the skill (witch needs the skill id) and get back to the skill list

skill-list-component.html

            <div *ngIf="skills$ | async as skills else noData">
                <div class="skill-item" *ngFor="let skill of skills">
                    <mat-card class="skill-name">
                        <mat-card-title>{{skill.name}}</mat-card-title>
                    </mat-card>
                    <mat-card class="edit-skill">
                        <a>
                            <mat-icon class="icon">create</mat-icon>
                        </a>
                    </mat-card>
                    <mat-card class="delete-skill">
                        <a>
                      <mat-icon class="icon" (click)="openDialog(skill)">delete</mat-icon>       
                        </a>
                    </mat-card>
                </div>
            </div>

skill-list-component.ts

export interface DialogData {
 skill: [];
}

@Component({
  selector: 'app-skill-list',
  templateUrl: './skill-list.component.html',
  styleUrls: ['./skill-list.component.scss'],
})
export class SkillListComponent implements OnInit {
  constructor(private router: Router, private route: ActivatedRoute, private api: ApiService, public dialog: MatDialog) {}
  skills$;
  private sub: any;
  consultantId: number;

  ngOnInit(): void {
    this.sub = this.route.params.subscribe(params => {
      this.consultantId = Number(params['id']);
      this.skills$ = this.api.getAllSkills(this.consultantId).subscribe(response => {
        console.log(response);
      });
    });
  }

  navigateSkillAdd() {
    this.router.navigate([`skillplatform/${this.consultantId}/add`]);
  }

  openDialog(skill){
    const dialogRef = this.dialog.open(DialogDeleteConfirm,{
      width: '250px',
      data: { skill}
    })
  }


}

@Component({
  selector: 'dialog-delete-confirm',
  templateUrl: 'dialog-delete-confirm.html',
})
export class DialogDeleteConfirm {

  constructor(
    public dialogRef: MatDialogRef<DialogDeleteConfirm>, private api :ApiService, private router: Router, @Inject(MAT_DIALOG_DATA) public data: DialogData ) {}


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

  deleteSkill(skillId , consultantId) {
    this.api
      .deleteSkill(skillId)
      .subscribe(response => console.log('DELETE skill from skills response: ', response ));
      this.router.navigate([`skillplatform/${consultantId}/add`]);
      this.dialogRef.close();

  }

}

dialog-delete-confirm.html

<div mat-dialog-content>
  <p>Are you sure you want to delete</p>
  <p>"{{skill.name}}" from skill list?</p>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()">No Thanks</button>
  <button mat-button (click)="deleteSkill(skill.id, skill.consultantId)">Yes, I"m sure</button>
</div>

errors

ERROR in src/app/skill-platform/components/skill-list/dialog-delete-confirm.html:4:9 - error TS2339: Property 'skill' does not exist on type 'DialogDeleteConfirm'.

4   <p>"{{skill.name}}" from skill list?</p>
          ~~~~~

  src/app/skill-platform/components/skill-list/skill-list.component.ts:45:16
    45   templateUrl: 'dialog-delete-confirm.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component DialogDeleteConfirm.
src/app/skill-platform/components/skill-list/dialog-delete-confirm.html:8:43 - error TS2339: Property 'skill' does not exist on type 'DialogDeleteConfirm'.

8   <button mat-button (click)="deleteSkill(skill.id, skill.consultantId)">Yes, I"m sure</button>       
                                            ~~~~~

  src/app/skill-platform/components/skill-list/skill-list.component.ts:45:16
    45   templateUrl: 'dialog-delete-confirm.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component DialogDeleteConfirm.
src/app/skill-platform/components/skill-list/dialog-delete-confirm.html:8:53 - error TS2339: Property 'skill' does not exist on type 'DialogDeleteConfirm'.

8   <button mat-button (click)="deleteSkill(skill.id, skill.consultantId)">Yes, I"m sure</button>       
                                                      ~~~~~

  src/app/skill-platform/components/skill-list/skill-list.component.ts:45:16
    45   templateUrl: 'dialog-delete-confirm.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component DialogDeleteConfirm.

Could anyone tell me how I can accomplish this the propper way?

Solution

Here is your answer

@Component({
  selector: 'dialog-delete-confirm',
  templateUrl: 'dialog-delete-confirm.html',
})
export class DialogDeleteConfirm  {

  constructor(
    public dialogRef: MatDialogRef<DialogDeleteConfirm>, private api :ApiService, private router: Router, @Inject(MAT_DIALOG_DATA) public data: DialogData ) {
**console.log(this.data) // here in data you will get skills data**
}


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

  deleteSkill(skillId , consultantId) {
    this.api
      .deleteSkill(skillId)
      .subscribe(response => console.log('DELETE skill from skills response: ', response ));
      this.router.navigate([`skillplatform/${consultantId}/add`]);
      this.dialogRef.close();

  }

}