Get the specific user data in modal on click from API

Question

I'm only getting the user ID or fName etc, but not getting all the detail at once in the modal ( Pop-up ). I wanted to get only one specific user data in the modal.

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>

In the .ts file I'm able to get the all the data from API. But I wanted to try to get one user data onclick the button which is (open)="openModal()"

.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";
  } 

Answer 1

Pass the user object inside the method like so

html

(open)="openModal(user)"

ts

openModal(user: any) {
      let selectedUser = JSON.stringify(user); // this variable contains the user details
      this.selectedUser=selectedUser;
      alert(selectedUser);
      this.display = "block";   
}

Updated Code:

You need to pass the user object that you are using in the html into the method and just store it in a variable, please not that inside the model you are showing a popup with a table, so that user should be stored inside an array only, please refer the below stackblitz!

ts

import { CommonModule } from '@angular/common';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { Component } from '@angular/core';

@Component({
  selector: 'app-student-data',
  templateUrl: './student-data.component.html',
  standalone: true,
  imports: [CommonModule, HttpClientModule],
})
export class StudentDataComponent {
  newdata: any = { users: [] };

  constructor(private httpClient: HttpClient) {}

  selectedUser: any;

  UserClicked(user: any) {
    let selectedUser = [{ ...user }];
    this.display = 'block';

    this.selectedUser = selectedUser;
    // alert(selectedUser);
  }

  ngOnInit(): void {
    this.httpClient.get('https://dummyjson.com/users').subscribe((res) => {
      console.log(res);
      this.newdata = res;
      console.log(this.newdata.users);
    });
  }

  display = 'none';

  // let selectedUser2 : any;

  onCloseHandled() {
    this.display = 'none';
  }
}

html

<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)="UserClicked(user)"
        >
          See Details
        </button>
      </td>
    </tr>
  </tbody>
</table>

<div class="modal" tabindex="-1" role="dialog" [ngStyle]="{ display: display }">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">User Details</h4>
        <button
          type="button"
          class="close"
          aria-label="Close"
          (click)="onCloseHandled()"
        >
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Model body text</p>

        <table class="table table-striped">
          <thead>
            <tr>
              <th scope="col">#ID</th>
              <th scope="col">First Name</th>
              <th scope="col">Last Name</th>
              <th scope="col">Gender</th>
              <th scope="col">Email</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let user of selectedUser">
              <td>{{ user?.id }}</td>
              <td>{{ user?.firstName }}</td>
              <td>{{ user?.lastName }}</td>
              <td>{{ user?.gender }}</td>
              <td>{{ user?.email }}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="modal-footer">
        <button
          type="button"
          class="btn btn-default"
          (click)="onCloseHandled()"
        >
          Close
        </button>
      </div>
    </div>
  </div>
</div>

stackblitz