title: Angular Material UI Dialog give data to dialog pop up
body: <p>I'm making a delete confirmation dialog in Angular with Material Ui ( <a href="https://material.angular.io/components/dialog/overview" rel="nofollow noreferrer">https://material.angular.io/components/dialog/overview</a>).
  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</p>
  
  <p>skill-list-component.html</p>
  
  <pre><code>            &lt;div *ngIf="skills$ | async as skills else noData"&gt;
                  &lt;div class="skill-item" *ngFor="let skill of skills"&gt;
                      &lt;mat-card class="skill-name"&gt;
                          &lt;mat-card-title&gt;{{skill.name}}&lt;/mat-card-title&gt;
                      &lt;/mat-card&gt;
                      &lt;mat-card class="edit-skill"&gt;
                          &lt;a&gt;
                              &lt;mat-icon class="icon"&gt;create&lt;/mat-icon&gt;
                          &lt;/a&gt;
                      &lt;/mat-card&gt;
                      &lt;mat-card class="delete-skill"&gt;
                          &lt;a&gt;
                        &lt;mat-icon class="icon" (click)="openDialog(skill)"&gt;delete&lt;/mat-icon&gt;       
                          &lt;/a&gt;
                      &lt;/mat-card&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
  </code></pre>
  
  <p>skill-list-component.ts</p>
  
  <pre><code>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 =&gt; {
        this.consultantId = Number(params['id']);
        this.skills$ = this.api.getAllSkills(this.consultantId).subscribe(response =&gt; {
          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&lt;DialogDeleteConfirm&gt;, 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 =&gt; console.log('DELETE skill from skills response: ', response ));
        this.router.navigate([`skillplatform/${consultantId}/add`]);
        this.dialogRef.close();
  
    }
  
  }
  
  </code></pre>
  
  <p>dialog-delete-confirm.html</p>
  
  <pre><code>&lt;div mat-dialog-content&gt;
    &lt;p&gt;Are you sure you want to delete&lt;/p&gt;
    &lt;p&gt;"{{skill.name}}" from skill list?&lt;/p&gt;
  &lt;/div&gt;
  &lt;div mat-dialog-actions&gt;
    &lt;button mat-button (click)="onNoClick()"&gt;No Thanks&lt;/button&gt;
    &lt;button mat-button (click)="deleteSkill(skill.id, skill.consultantId)"&gt;Yes, I"m sure&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>errors</p>
  
  <pre><code>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   &lt;p&gt;"{{skill.name}}" from skill list?&lt;/p&gt;
            ~~~~~
  
    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   &lt;button mat-button (click)="deleteSkill(skill.id, skill.consultantId)"&gt;Yes, I"m sure&lt;/button&gt;       
                                              ~~~~~
  
    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   &lt;button mat-button (click)="deleteSkill(skill.id, skill.consultantId)"&gt;Yes, I"m sure&lt;/button&gt;       
                                                        ~~~~~
  
    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.
  </code></pre>
  
  <p>Could anyone tell me how I can accomplish this the propper way? </p>