title: Angular 4 : how to send id of a user in modals bootstrap
body: <p>I'm working with Angular 4 as front end and spring boot as back end , i wanted to use bootstrap modals to show the details of a user while i click on a button 'user details' .</p>
  
  <p>this is clients.component.html</p>
  
  <pre><code>    &lt;!--/.col--&gt;
  &lt;div class="col-lg-12"&gt;
    &lt;div class="card"&gt;
      &lt;div class="card-header"&gt;
        &lt;i class="fa fa-align-justify"&gt;&lt;/i&gt; Information des clients
      &lt;/div&gt;
      &lt;div class="card-body"&gt;
        &lt;table class="table table-striped"&gt;
          &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt;Numéro&lt;/th&gt;
            &lt;th&gt;prenom&lt;/th&gt;
            &lt;th&gt;nom&lt;/th&gt;
            &lt;th&gt;Telephone&lt;/th&gt;
            &lt;th&gt;&lt;/th&gt;
            &lt;th&gt;&lt;/th&gt;
          &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
  
          &lt;tr *ngFor="let c of pageClients?.content"&gt;
            &lt;td&gt;{{c.id}}&lt;/td&gt;
            &lt;td&gt;{{c.prenom}}&lt;/td&gt;
            &lt;td&gt;{{c.nom}}&lt;/td&gt;
            &lt;td&gt;{{c.tel}}&lt;/td&gt;
            &lt;td&gt;&lt;a (click)="delete(c)"&gt;delete&lt;/a&gt; &lt;a (click)="Edit(c.id)"&gt;Edit&lt;/a&gt;&lt;/td&gt;
            &lt;td&gt;&lt;button type="button" class="btn btn-primary relative waves-light" data-toggle="modal"  (click)="largeModal.show()"&gt;
             user details
            &lt;/button&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;/tbody&gt;
        &lt;/table&gt;
  
        &lt;ul class="pagination"&gt;
          &lt;li class="page-item" [ngClass]="{'active':i==currentPage}" *ngFor="let p of pages ; let i=index"&gt;
            &lt;a class="page-link" (click)="gotoPage(i)"&gt;{{i}}&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;div bsModal #largeModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
    &lt;div class="modal-dialog modal-lg" role="document"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;h4 class="modal-title"&gt;Modal title&lt;/h4&gt;
          &lt;button type="button" class="close" (click)="largeModal.hide()" aria-label="Close"&gt;
            &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
          &lt;/button&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-secondary" (click)="largeModal.hide()"&gt;Close&lt;/button&gt;
          &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;&lt;!-- /.modal-content --&gt;
    &lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
  &lt;/div&gt;&lt;!-- /.modal --&gt;
  </code></pre>
  
  <p>when i click on details of client i get a large modal , i want to send id to this modal so i can include in it all a specific user's details ..</p>
  
  <p>In client.component.ts : </p>
  
  <pre><code>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;
    pages:Array&lt;number&gt;;
    currentPage:number=0;
    page:number=0;
    size:number=5;
    public largeModal;
  
    constructor(private router:Router,
                private clientService:ClientService,
                private route: ActivatedRoute) { }
  
    ngOnInit() {
      this.doSearch();
    }
  
    doSearch(){
      this.clientService.getClients(this.currentPage,this.size)
        .subscribe((data:any)=&gt;{
          this.pageClients=data;
          this.pages=new Array(data.totalPages);
          console.log(this.pageClients);
        },err=&gt;{
          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=&gt;{
            this.pageClients.content.splice(
              this.pageClients.content.indexOf(p),1
            );
          },err=&gt;{
            console.log(err);
          })
      }
    }
  
  
  }
  </code></pre>
  
  <p>any idea ? </p>