Angular 5 : how to show user's details in ngx bootstrap modal?

Question

I'm working with angular 5 as front end, and spring boot as back end, in clients.component.html I get list of clients that exists in my database mysql.

What I want to do is to show only few information and when a user clicks on button called 'user details' he can gets the other information that appears in a ngx bootstrap modal .

This is clients.component.html :

  <!--/.col-->
<div class="col-lg-12">
  <div class="card">
    <div class="card-header">
      <i class="fa fa-align-justify"></i> Information des clients
    </div>
    <div class="card-body">
      <table class="table table-striped">
        <thead>
        <tr>
          <th>Number</th>
          <th>first name</th>
          <th>last name</th>
          <th></th>
          <th></th>
        </tr>
        </thead>
        <tbody>

        <tr *ngFor="let c of pageClients?.content">
          <td>{{c.id}}</td>
          <td>{{c.firstname}}</td>
          <td>{{c.lastname}}</td>
          <td><a (click)="delete(c)">delete</a> <a (click)="Edit(c.id)">Edit</a></td>
          <td><button type="button" class="btn btn-primary relative waves-light" data-toggle="modal"  (click)="getSpecifitClientDetails(c.id)">
            user details
          </button>
          </td>
        </tr>

        </tbody>
      </table>

      <ul class="pagination">
        <li class="page-item" [ngClass]="{'active':i==currentPage}" *ngFor="let p of pages ; let i=index">
          <a class="page-link" (click)="gotoPage(i)">{{i}}</a>
        </li>
      </ul>
    </div>
  </div>
</div>


<div bsModal #largeModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Modal title</h4>
        <button type="button" class="close" (click)="largeModal.hide()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
         <div *ngFor="let p of pageClient?.content">
         <p>{{p.id}}</p>
         <p>{{p.firstname}}</p>
         <p>{{p.lastname}}</p>
         <p>{{p.tel}}</p>
         <p>{{p.email}}</p>
            </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="largeModal.hide()">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

This is client.component.ts

import { Component, OnInit , ViewChild  } from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {ClientService} from '../../../../../service/client.service';
import {Clients} from '../../Models/Clients';
import { ModalDirective } from 'ngx-bootstrap/modal';


@Component({
  selector: 'app-clients',
  templateUrl: './clients.component.html',
  styleUrls: ['./clients.component.scss']
})
export class ClientsComponent implements OnInit {

  pageClients:any;
  pageClient:any; //Specific user
  pages:Array<number>;
  currentPage:number=0;
  page:number=0;
  size:number=5;
  @ViewChild('largeModal') largeModal;
  userId:number;

  constructor(private router:Router,
              private clientService:ClientService,
              private route: ActivatedRoute) { }

  ngOnInit() {
    this.doSearch();
  }
getSpecifitClientDetails(id:number){
    this.clientService.getClient(id)
      .subscribe((data:any)=>{
        this.pageClient = data;
        this.largeModalShow();
      },err=>{
        console.log('this is error');
      })
  }


public largeModalHide(): void {
      this.largeModal.hide();    
    }
  }
 public largeModalShow(): void {
      this.largeModal.show();    
    }
  }



doSearch(){
        this.clientService.getClients(this.currentPage,this.size)
          .subscribe((data:any)=>{
            this.pageClients=data;
            this.pages=new Array(data.totalPages);
            console.log(this.pageClients);
          },err=>{
            console.log('this is error');
          })
      }


      gotoPage(i:number){
        this.currentPage = i;
        this.doSearch();
      }

      Edit(id:number){
        this.router.navigate(['edit',id], { relativeTo: this.route });
      }

      delete(p:Clients){
        let confirm = window.confirm('are you sur ');
        if(confirm==true){
          this.clientService.deleteClient(p.id)
            .subscribe(data=>{
              this.pageClients.content.splice(
                this.pageClients.content.indexOf(p),1
              );
            },err=>{
              console.log(err);
            })
        }
      }


    }

so the attribute pageClients contains all the information of all the clients , but in the table I show only id, firstname, lastname, so I want to show the rest of these information of the specific client in the modal as email, phoneNumber etc ..

EDIT

The Modal is empty , but i did consol.log(this.pageClient) and i get the right result , any idea ?

This is what i get when i click on client number 3 , in fact it's not correct 100%

 {id: 3, username: "client2", password: "$2a$10$wmaJk/6uX0/iR1Itgey/AetV3WJotUiJKTNSXEV07ZfEa8o..yMXC", firstname: "useer", lastname: "sonoom", …}
cin
:
"ciin"
client
:
{id: 1, username: "admin", password: "$2a$10$UXzvwgqxM0HA5UyHu0Rx2OJD.jjPT1hZy.iRMhZ2UOCrLgkkaSqJe", firstname: "admii", lastname: "add", …}
contrats
:
[]
devlopper
:
null
email
:
"fat@gmail.com"
id
:
3
interventions
:
Array(0)
length
:
0
__proto__
:
Array(0)
nom
:
"sonoom"
password
:
"$2a$10$wmaJk/6uX0/iR1Itgey/AetV3WJotUiJKTNSXEV07ZfEa8o..yMXC"
prenom
:
"useer"
projects
:
[]
roles
:
[{…}]
tel
:
13153098
username
:
"client2"

Answer 1

Ideally,You should have 2 api's. It's on you though, One for showing list and another for showing details of particular selected.

@ViewChild('largeModal') largeModal;
  public largeModalHide(): void {
      this.largeModal.hide();    
    }
  }
 public largeModalShow(): void {
      this.largeModal.show();    
    }
  }

on click on list or button, you call a method that gets you the details, once you get the details, initialize the modal inputs or form with details and call largeModalShow()

Try if pageClient is an array:

<div class="modal-body">
        <div *ngFor="let p of pageClient">
         <p>{{p.id}}</p>
         <p>{{p.firstname}}</p>
         <p>{{p.lastname}}</p>
         <p>{{p.tel}}</p>
         <p>{{p.email}}</p>
        </div>
      </div>

In Ts:

pageClients = new Array<any>();