Passing user id to delete method using bootstrap modals

Question

I'm new to angular and this is what I'm trying to achieve: I have a component that shows a list of users. When the delete action is clicked, a modal dialog appears to ask for confirmation. I'm not really sure how to pass the id of the user to delete to the delete method.

users.component.html:

 <div class="container">
    <div style="margin-top:10px;">
      
      <mat-form-field appearance="standard">
        <mat-label>Filter</mat-label>
        <input matInput (keyup)="applyFilter($event)" placeholder="Ex: mia" #input>
      </mat-form-field>
      
      
      <div class="mat-elevation-z8">
        <table mat-table [dataSource]="dataSource" matSort>
      
          <!-- ID Column -->
          <ng-container matColumnDef="id">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
            <td mat-cell  *matCellDef="let row" id="userid"> {{row.id}} </td>
          </ng-container>
      
      
          <!-- Name Column -->
          <ng-container matColumnDef="email">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Email </th>
            <td mat-cell *matCellDef="let row"> {{row.email}} </td>
          </ng-container>
      
          <!-- Fruit Column -->
          <ng-container matColumnDef="username">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Username </th>
            <td mat-cell *matCellDef="let row"> {{row.username}} </td>
          </ng-container>

           <!-- Fruit Column -->
           <ng-container matColumnDef="action">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Action</th>
            <td mat-cell *matCellDef="let row" >
              <!--
              <button mat-icon-button color="warn"  (click)="deleteUser(row.id)"> -->
               <!----> 
              <button mat-icon-button color="warn" class="open-exampleModal" data-bs-toggle="modal" data-bs-target="#exampleModal"  > 
                <!--
              <button mat-icon-button color="warn" (click)="opendialog()" > -->
                <mat-icon>delete</mat-icon>
              </button>
              
            </td>
          </ng-container>
      
          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

          <!-- Row shown when there is no matching data. -->
          <tr class="mat-row" *matNoDataRow>
            <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
          </tr>



      
         
        </table>
      
        <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page of users"></mat-paginator>
      </div>
      

    </div>
  </div>


 
  
  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" *ngFor="let user of users"  >
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Confirmation de la suppression</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          Êtes-vous sûr de vouloir supprimer l'utilisateur?
        </div>
        <div class="modal-footer">
          <button   mat-raised-button  color="primary"  (click)="deleteUser(user.id)" data-bs-dismiss="modal">Supprimer</button>
          <button mat-raised-button   color="warn" data-bs-dismiss="modal">Annuler</button>
         
        </div>
      </div>
    </div>
  </div>

users.component.ts:

import { Component, OnInit, ViewChild} from '@angular/core';
import { MatDialog,  MatTableDataSource,  } from '@angular/material';
import { AddUserComponent } from '../add-user/add-user.component';
import { UserServiceService } from '../services/user-service.service';
import {MatPaginator} from '@angular/material/paginator';
import {MatSort} from '@angular/material/sort';
import { User } from '../models/user';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit{
  displayedColumns: string[] = ['id', 'email', 'username','action'];
  users:User[]=[];
  dataSource: MatTableDataSource<User>;
  userDetail:FormGroup;
 

  @ViewChild(MatPaginator,{static:true}) paginator: MatPaginator;
  @ViewChild(MatSort,{static:true}) sort: MatSort;


  constructor(private dialog:MatDialog, private userService: UserServiceService, private formBuilder:FormBuilder, ) { 
    userService.getAllUsers().subscribe((users) => {
     
      for (const user of users) {
       const newUser = new User(user.id, user.email, user.username);
        this.users.push(newUser);
       
      }
     
      //console.log(this.users);
      this.dataSource = new MatTableDataSource<User>(this.users);
      this.dataSource.paginator=this.paginator;
       this.dataSource.sort=this.sort; 
    });
  }

  ngOnInit() {
   this.getAllUsers();
   this.userDetail=this.formBuilder.group({
    username:['',Validators.required],
    email:['',Validators.required],
    password:['',Validators.required]
  })
   
  }

  
  openDialog(){
    this.dialog.open(AddUserComponent,{
      width:'30%'
      
    });
  }


  getAllUsers(){
    this.userService.getAllUsers()
    .subscribe({
      next:(res)=>{
        this.users=res;
        //console.log(res);
        console.log(this.users);
         this.dataSource=new MatTableDataSource(res);
         // this.dataSource = res;
            this.dataSource.paginator = this.paginator;
       
      }, error:(err)=>{
        alert("error while fetching records");
      }
    })
  }

  refresh() {
    this.getAllUsers();
    this.dataSource.data = [...this.dataSource.data];
    this.dataSource.paginator = this.paginator;
}
 

  deleteUser( id:number){
   this.userService.deleteUser(id)
   .subscribe({
      next:(res)=>{
        //alert("utilisateur supprimé avec succée!");
        this.refresh();
      },
      error:()=>{
        alert("erreur lors de la suppression");
      }
   }); 
   

  }

  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();

    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }

  }

This way it is always deleting the first record, I'm not sure how to pass the right user id.