I am currently facing an issue where I am only able to retrieve the user ID or first name, but not all the details at once in the modal popup. My goal is to display specific user data in the modal.
Here is the HTML code:
<table class="table table-striped ">
<thead>
<tr>
<th scope="col">#ID</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Gender</th>
<th scope="col">User Detail</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of newdata.users;">
<td>{{user?.id}}</td>
<td>{{user?.firstName}}</td>
<td>{{user?.lastName}}</td>
<td>{{user?.gender}}</td>
<td>
<button type="button" class="btn btn-info btn-lg" (click)="openModal()">See Details</button>
</td>
</tr>
</tbody>
</table>
Although I am able to fetch all the data from the API in the .ts file, my aim is to retrieve one user's data when the button with (open)="openModal()" is clicked.
Here is the .ts code:
newdata:any = { users: [] };
constructor (private userAPIData:StudentDataService){}
selectedUser:any;
UserClicked(newdata:any){
let selectedUser = JSON.stringify(newdata);
// this.selectedUser=newdata;
alert(selectedUser);
}
ngOnInit(): void {
this.userAPIData.getdata().subscribe(res =>{
// this.newdata= Object.values(res);
this.newdata = res;
console.log(this.newdata.users)
})
}
display = "none";
openModal() {
this.display = "block";
}
onCloseHandled() {
this.display = "none";
}