Passing user id to delete method using bootstrap modals - modal-dialog

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.