id recovery with angular 4

hello, I have a problem, I work angular 4, I have a client component where I display the list of customers and an info button for each client I would like that by clicking on the button info it has a link rememenat me on another page by also recovering the id of the client concer and this id I will add it in another product, I am blocked above.Thank you in advance.

and here is my html code:

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<div class="row">
	<div class="col-sm-6" style="margin-top: 18px;">
		<div ngbDropdown class="dropdown-success dropdown open">
			<button class="btn btn-success" (click)="ver_NC(nc, ncModal)">
				<i class="icofont icofont-plus-circle"></i>Nouveau Client
			</button>
		</div>
	</div>
	<div class="col-sm-12">
		<!-- Contextual classes table starts -->
		<app-card [title]="'Clients'" [classHeader]="true"
			[blockClass]="'table-border-style'"> <!-- Modal Ajout Client -->

		<ng-template #ncModal>
		<div class="modal-header" style="background-color: #28e1bd;">
			<h4 class="modal-title">Nouveau Client:</h4>
			<button type="button" class="btn cancel" data-dismiss="modal"
				(click)="goBack()">
				<span aria-hidden="true">&times;</span>
			</button>
		</div>
		<div class="modal-body">
			<form name="form"
				(ngSubmit)="f.form.valid && save({title:'Message de confirmation', msg:'Client ajouté avec succès', timeout: 5000
				, theme:'bootstrap', position:'bottom-right', type:'success'})"
				#f="ngForm" novalidate>
				<div class="alert alert-danger" role="alert" *ngIf="errorMessage">{{errorMessage}}</div>
				<div class="card card-border-primary">
					<div class="card-header">
						<h5>INFORMATIONS</h5>
					</div>
					<div style="font-size: 13px" id="fiche" class="card-body row">
						<div class="col-sm-12" style="font-size: 13px">


							<div class="form-group row">
								<div class="col-sm-3"
									[ngClass]="{ 'has-error': f.submitted && !nom.valid }">
									<label style="font-family: verdana">Nom:</label> <input
										style="font-size: 13px;" type="text" class="form-control"
										id="nom" name="nom" [(ngModel)]="client.nom" #nom="ngModel"
										required />
									<div *ngIf="f.submitted && !nom.valid"
										class="form-control-danger col-form-label">Nom complet
										requis</div>
								</div>
								<div class="col-sm-3"
									[ngClass]="{ 'has-error': f.submitted && !prenom.valid }">
									<label style="font-family: verdana"> Prénom: </label> <input
										style="font-size: 13px;" type="text" class="form-control"
										id="prenom" name="prenom" [(ngModel)]="client.prenom"
										#prenom="ngModel" required>
									<div *ngIf="f.submitted && !prenom.valid"
										class="form-control-danger col-form-label">Prénom requis</div>
								</div>
								<div class="col-sm-3"
									[ngClass]="{ 'has-error': f.submitted && !cim.valid }">
									<label style="font-family: verdana">CIM:
									</label> <input style="font-size: 13px; margin-bottom: 5px" type="number"
										max="2000-01-01" class="form-control" id="date_naissance"
										name="cim" [(ngModel)]="client.cim"
										#cim="ngModel" required>
									<div *ngIf="f.submitted && !cim.valid"
										class="form-control-danger col-form-label">CIM requise</div>
								</div>
								<div class="col-sm-3"
									[ngClass]="{ 'has-error': f.submitted && !email.valid }">

									<label style="font-family: verdana">E-mail: </label> <input
										style="font-size: 13px" type="email" pattern="[^ @]*@[^ @]*"
										class="form-control" id="email" name="email"
										[(ngModel)]="client.email" #email="ngModel" required>
									<div *ngIf="f.submitted && !email.valid"
										class="form-control-danger col-form-label">Email requis</div>
								</div>


							</div>

							<!-- Ligne 2 -->

							<div class="form-group row">
								<div class="col-sm-3"
									[ngClass]="{ 'has-error': f.submitted && !nomsociete.valid }">

									<label style="font-family: verdana">Société: </label> <input style="font-size: 13px" type="text"
										class="form-control" id="nomsociete" name="nomsociete"
										[(ngModel)]="client.nomsociete" #nomsociete="ngModel" required />
									<div *ngIf="f.submitted && !nomsociete.valid"
										class="form-control-danger col-form-label">nom de la societe réquis</div>
								</div>
								<div class="col-sm-3"
									[ngClass]="{ 'has-error': f.submitted && !numerosociete.valid }">
									<label style="font-family: verdana">Immatriculation Fiscala:
									</label> <input style="font-size: 13px" type="number"
										class="form-control" id="numerosociete" name="numerosociete"
										[(ngModel)]="client.numerosociete" #numerosociete="ngModel" required>
									<div *ngIf="f.submitted && !numerosociete.valid"
										class="form-control-danger col-form-label">Numéro de la
										société requis</div>
								</div>
								<div class="col-sm-3"
									[ngClass]="{ 'has-error': f.submitted && !tel.valid }">
									<label style="font-family: verdana">Tel: </label> <input
										style="font-size: 13px" type="number" class="form-control"
										id="tel" name="tel"
										[(ngModel)]="client.tel" #tel="ngModel" required>
									<div *ngIf="f.submitted && !tel.valid"
										class="form-control-danger col-form-label">le numero de téléphone
										requis</div>
								</div>


							</div>

							<!-- Ligne 3 -->



							<!-- Ligne 4 -->


						</div>
					</div>
				</div>

				<div class="row">
					<div>
						<button class="btn btn-primary btn-round"
							style="height: 30px; text-align: center; padding-top: 5px; margin-left: 500%; margin-top: 10px; margin-bottom: 10px">Annuler</button>
					</div>
					<div>
						<button class="btn btn-primary btn-round" type="submit"
							style="height: 30px; text-align: center; padding-top: 5px; margin-left: 420%; margin-top: 10px; margin-bottom: 10px">Sauvegarder</button>
					</div>
				</div>
			</form>
		</div>
		<div class="modal-footer"></div>
		</ng-template> <!-- Fin Modal Ajout Client -->

		<div>
			<input type="text" id="myInput" (keyup)="myFunction($event)"
				placeholder="Rechercher par nom..." title="Tapez un nom"
				style="width: 200px; -webkit-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out;">
		</div>



		<div class="table-responsive">
			<table class="table table-hover" id="customers">
				<thead>
					<tr>
						<th>Client N°</th>
						<th>Nom</th>
						<th>Prénom</th>
						<th>CIM</th>
						<th>Société</th>
						<th>Immatriculation Fiscale</th>
						<th>E-mail</th>
						<th>Tel</th>
						<th>action</th>
					</tr>
				</thead>
				<tbody>
					<tr *ngFor="let c of clients" class="table-active"
						style="cursor: pointer;">
						<td>{{c.id}}</td>
						<td>{{c.nom}}</td>
						<td>{{c.prenom}}</td>
						<td>{{c.cim}}</td>
						<td>{{c.nomsociete}}</td>
						<td>{{c.numerosociete}}</td>
						<td>{{c.email}}</td>
						<td>{{c.tel}}</td>
						<td><a class="btn btn-primary" style="padding: 1px 2px;"
							(click)="ver_UC(uc, ucModal)"> <i
								class="icofont icofont-pencil"
								style="font-size: 20px; color: white"></i>
						</a> <a class="btn btn-danger" style="padding: 1px 2px; color: white;"
							(click)="deleteClient(c)"> <i class="icofont icofont-bin"
								style="font-size: 20px"></i>
						</a> <a routerLink="/produit" routerLinkActive="active" class="btn btn-warning" style="padding: 1px 2px;"
						(click)="choisir(c.id)"> <i class="icofont icofont-info"
								style="font-size: 20px; color: white"></i>
						</a> </td>
						<!-- Debut Modal Details -->

						<ng-template #cModal>
						<div class="modal-header" style="background-color: #28e1bd;">
							<h4 class="modal-title">
								Informations complémentaires sur: <b>{{c.prenom}} {{c.nom}}</b>
							</h4>
						</div>
						<div class="modal-body">
							<div>
								Email:<b>{{c.email}}</b>
							</div>
							<div>
								Sociéte <b>{{c.nomsociete}}</b>
							</div>
							<div>
								Immatriculation Fiscala: <b>{{c.numerosociete}}</b>
							</div>
							<div>
								CIM: <b>{{c.cim}}</b>
							</div>
							<div>
								Tel: <b>{{c.tel}}</b>
							</div>
							<div>
								user: <b>{{c.user}}</b>
							</div>

						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default">Close</button>
						</div>
						</ng-template>

						<!-- Fin Modal Details -->

						<!-- modification -->

						<ng-template #ucModal>
						<div class="modal-header" style="background-color: #28e1bd;">
							<h4 class="modal-title">Modifier Client:</h4>
							<button type="button" class="btn cancel" (click)="goBack()">
								<span aria-hidden="true">&times;</span>
							</button>
						</div>
						<div class="modal-body">
							<form name="formEdit" (ngSubmit)="fe.form.valid && saveUpdate(c)"
								#fe="ngForm" novalidate>
								<div class="alert alert-danger" role="alert"
									*ngIf="errorMessage">{{errorMessage}}</div>
								<div class="card card-border-primary">
									<div class="card-header">
										<h5>INFORMATIONS</h5>
									</div>
									<div style="font-size: 13px" id="fiche" class="card-body row">
										<div class="col-sm-12" style="font-size: 13px">

											<!-- Ligne 0 -->

											<div class="form-group row">
												<div class="col-sm-3"
													[ngClass]="{ 'has-error': fe.submitted && !sexe.valid }">
													<label style="font-family: verdana">Sexe: </label> <select
														name="sexe" id="sexe" class="form-control"
														[(ngModel)]="c.sexe" #sexe="ngModel" required>
														<option value="Femme">Femme</option>
														<option value="Homme">Homme</option>
													</select>
												</div>
											</div>


											<!-- Ligne 1 -->

											<div class="form-group row">
												<div class="col-sm-3"
													[ngClass]="{ 'has-error': fe.submitted && !nom.valid }">
													<label style="font-family: verdana">Nom:</label> <input
														style="font-size: 13px;" type="text" class="form-control"
														id="nom" name="nom" [(ngModel)]="c.nom" #nom="ngModel"
														required />
													<div *ngIf="fe.submitted && !nom.valid"
														class="form-control-danger col-form-label">Nom
														complet requis</div>
												</div>
												<div class="col-sm-3"
													[ngClass]="{ 'has-error': fe.submitted && !prenom.valid }">
													<label style="font-family: verdana"> Prénom: </label> <input
														style="font-size: 13px;" type="text" class="form-control"
														id="prenom" name="prenom" [(ngModel)]="c.prenom"
														#prenom="ngModel" required>
													<div *ngIf="fe.submitted && !prenom.valid"
														class="form-control-danger col-form-label">Prénom
														requis</div>
												</div>
												<div class="col-sm-3"
													[ngClass]="{ 'has-error': fe.submitted && !date_naissance.valid }">
													<label style="font-family: verdana">Date de
														Naissance: </label> <input
														style="font-size: 13px; margin-bottom: 5px" type="date"
														max="2000-01-01" class="form-control" id="date_naissance"
														name="date_naissance" [(ngModel)]="c.date_naissance"
														#date_naissance="ngModel" required>
													<div *ngIf="fe.submitted && !date_naissance.valid"
														class="form-control-danger col-form-label">Date de
														naissance requise</div>
												</div>
												<div class="col-sm-3"
													[ngClass]="{ 'has-error': fe.submitted && !email.valid }">

													<label style="font-family: verdana">E-mail: </label> <input
														style="font-size: 13px" type="email"
														pattern="[^ @]*@[^ @]*" class="form-control" id="email"
														name="email" [(ngModel)]="c.email" #email="ngModel"
														required>
													<div *ngIf="fe.submitted && !email.valid"
														class="form-control-danger col-form-label">Email
														requis</div>
												</div>


											</div>

											<!-- Ligne 2 -->

											<div class="form-group row">
												<div class="col-sm-3"
													[ngClass]="{ 'has-error': fe.submitted && !portable.valid }">

													<label style="font-family: verdana">Numéro de
														Téléphone: </label> <input style="font-size: 13px" type="text"
														class="form-control" id="portable" name="portable"
														[(ngModel)]="c.portable" #portable="ngModel" required />
													<div *ngIf="fe.submitted && !portable.valid"
														class="form-control-danger col-form-label">Numero de
														téléphone réquis</div>
												</div>
												<div class="col-sm-3"
													[ngClass]="{ 'has-error': fe.submitted && !domicile.valid }">
													<label style="font-family: verdana">Numéro du
														Domicile: </label> <input style="font-size: 13px" type="text"
														class="form-control" id="domicile" name="domicile"
														[(ngModel)]="c.domicile" #domicile="ngModel" required>
													<div *ngIf="fe.submitted && !domicile.valid"
														class="form-control-danger col-form-label">Numéro du
														Domicile requis</div>
												</div>
												<div class="col-sm-3">
													<label style="font-family: verdana">Fax: </label> <input
														style="font-size: 13px" type="text" class="form-control"
														id="fax" name="fax" required disabled>
												</div>


											</div>

											<!-- Ligne 3 -->

											<div class="form-group row">

												<div class="col-sm-3"
													[ngClass]="{ 'has-error': fe.submitted && !ville.valid }">
													<label style="font-family: verdana">Ville: </label> <input
														style="font-size: 13px; margin-bottom: 5px" type="text"
														class="form-control" id="ville" name="ville"
														[(ngModel)]="c.ville" #ville="ngModel" required>
													<div *ngIf="fe.submitted && !ville.valid"
														class="form-control-danger col-form-label">Ville
														requise</div>
												</div>
												<div class="col-sm-3"
													[ngClass]="{ 'has-error': fe.submitted && !code_postale.valid }">
													<label style="font-family: verdana">Code Postal: </label> <input
														style="font-size: 13px" type="text" class="form-control"
														id="code_postale" name="code_postale"
														[(ngModel)]="c.code_postale" #code_postale="ngModel"
														required>
													<div *ngIf="fe.submitted && !code_postale.valid"
														class="form-control-danger col-form-label">Code
														Postal requis</div>
												</div>
												<div class="col-sm-3"
													[ngClass]="{ 'has-error': fe.submitted && !adresse.valid }">
													<label style="font-family: verdana">Adresse: </label> <input
														style="font-size: 13px;" type="text" class="form-control"
														id="adresse" name="adresse" [(ngModel)]="c.adresse"
														#adresse="ngModel" required>
													<div *ngIf="fe.submitted && !adresse.valid"
														class="form-control-danger col-form-label">Adresse
														requise</div>
												</div>
											</div>

											<!-- Ligne 4 -->

											<div class="form-group row">
												<div class="col-sm-3"
													[ngClass]="{ 'has-error': fe.submitted && !user_id.valid }">
													<label style="font-family: verdana">user: </label> <input
														style="font-size: 13px" type="text" class="form-control"
														id="user_id" name="user_id"
														[(ngModel)]="c.user_id" #user_id="ngModel" required>
													<div *ngIf="fe.submitted && !user_id.valid"
														class="form-control-danger col-form-label">user id requise</div>
												</div>

											</div>
										</div>
									</div>
								</div>


								<!-- Information partie 2 -->

								<!-- Bouton -->
								<div class="row">
									<div>
										<button class="btn btn-danger btn-round"
											style="height: 30px; text-align: center; padding-top: 5px; margin-left: 500%; margin-top: 10px; margin-bottom: 10px"
											(click)="goBack()">Annuler</button>
									</div>
									<div>
										<button class="btn btn-primary btn-round" type="submit"
											style="height: 30px; text-align: center; padding-top: 5px; margin-left: 420%; margin-top: 10px; margin-bottom: 10px">Sauvegarder</button>
									</div>
								</div>
							</form>
						</div>
						<div class="modal-footer"></div>
						</ng-template>
						<!-- end -->
					</tr>

				</tbody>
			</table>
		</div>


		</app-card>
	</div>
</div>
<ng2-toasty [position]="position"></ng2-toasty>


 

it’s the result of what I just posted

here is my component.ts code of client:

import {Client} from "../../model/model.client";
import { User } from "../../model/model.user";
import {ClientService} from "../../services/client.service";
import {OnInit} from "@angular/core";
import {Component} from "@angular/core";
import {Router} from "@angular/router";
import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
import {ToastyService, ToastOptions, ToastData} from "ng2-toasty";

@Component({
  selector: 'app-listeclients',
  templateUrl: './listeclients.component.html',
  styleUrls: ['./listeclients.component.css']
})
export class ListeclientsComponent implements OnInit {
  clients: Client[]; //liste des clients
  client: Client = new Client(); //nouveau client
  c: Client[]; //modal liste client
  nc: Client[]; //modal ajout client
  uc: Client[]; //modal update client
  idc:number;
  currentUser: User;

  private currentOrientation = 'vertical';

  private customer: Client;

  position = 'bottom-right';
  title: string;
  msg: string;
  showClose = true;
  timeout = 5000;
  theme = 'bootstrap';
  type = 'default';
  closeOther = false;

  errorMessage: string;

  constructor(private clientService: ClientService, public router: Router, private modalService: NgbModal
    , private toastyService: ToastyService) {
      this.getClients();
  this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
  }

  ver(client: Client, modal) {
    c => this.c = c;
    this.modalService.open(modal);
  }

  ver_NC(client: Client, modal) {
    nc => this.nc = nc;
    this.modalService.open(modal, {size: 'lg'});
  }

  ver_UC(client: Client, modal) {
    uc => this.uc = uc;
    //this.clientService.setter(client);
    this.modalService.open(modal, {size: 'lg'});
  }

  save(options, currentUser: User) {
    // ajout client //

    this.clientService.createClient(this.client).subscribe(data => {
      this.toastyService.success(toastOptions);
      this.goBack();
    }
    );

    // Notification //

    if (options.closeOther) {
      this.toastyService.clearAll();
    }
    this.position = options.position ? options.position : this.position;
    const toastOptions: ToastOptions = {
      title: options.title,
      msg: options.msg,
      showClose: options.showClose,
      timeout: options.timeout,
      theme: options.theme,
      onAdd: (toast: ToastData) => {
        console.log('Toast ' + toast.id + ' has been added!');
      },
      onRemove: (toast: ToastData) => {
        console.log('Toast ' + toast.id + ' has been added removed!');
      }
    };
  }

  getClients() {
    this.clientService.getClients().then(clients => this.clients = clients);
  }


  ngOnInit()
 {
    this.getValue(this.client);
    this.getClients();
    //this.client=this.clientService.getter(); //cause pb avec le modal qui prend tout l'ecran
  }

  deleteClient(user) {
    this.clientService.deleteClient(user.id).subscribe((data) => {
      this.clients.splice(this.clients.indexOf(user), 1);
    }, (error) => {
      console.log(error);
    });
  }

  goBack(): void {
    window.location.replace('/listeclients');
  }

  myFunction(event: any) {
    var input, filter, table, tr, td, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    table = document.getElementById("customers");
    tr = table.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {
      td = tr[i].getElementsByTagName("td")[1];
      if (td) {
        if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
          tr[i].style.display = "";
        } else {
          tr[i].style.display = "none";
        }
      }
    }
  }

    saveUpdate(cust) {
    this.clientService.updateClient(cust.id,
      {nom:cust.nom,prenom:cust.prenom}).subscribe(data => {
      console.log(data);
      cust = data as Client;
    }, (error) => {
      console.log(error);
    });
  }
  getValue(client:Client){
    client.user= this.currentUser.id;
  }

  choisir(id: number){
    this.idc = id;
  }
}

another sequence of the code:

here is my thml code of product:

<div class="form-group row">
    <div class="col-sm-4">
        <div>
          Nom du client:
        </div>
        <div>
          Prénom du client:
        </div>
        <div>
          CIM:
        </div>
        <div>
          Société:
        </div>
    </div>
    <div class="col-sm-4">
        <div>
            Immatriculation Fiscale:
          </div>
          <div>
            Email:
          </div>
          <div>
            Tel:
          </div>

    </div>
    </div>
<div class="row">
<div class="col-lg-6" style="float: left;">
  <div class="row">
    <div class="col-lg-16">

      <!-- ajout paiement mensuel-->

        <app-card [title]="'liste des paiements mensuels'" [classHeader]="true"
        [blockClass]="'table-border-style'">
        <div class="col-sm-6" style="margin-top: 18px;">
            <div ngbDropdown class="dropdown-success dropdown open">
              <button class="btn btn-success" (click)="ver_NC(nc, ncModal)">
                <i class="icofont icofont-plus-circle"></i>Paiement mensuel
              </button>
            </div>
          </div>

      <table class="table table-hover" id="customers">
        <thead>
          <tr>
            <th>pacs</th>
            <th>Date de paiement</th>
            <th>Mode de paiement</th>
            <th>Montant</th>
            <th>Validé</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let c of clients" class="table-active"
            style="cursor: pointer;">
            <td>{{c.nom}}</td>
            <td>{{c.prenom}}</td>
            <td>{{c.cim}}</td>
            <td>{{c.nomsociete}}</td>
            <td>{{c.numerosociete}}</td>
            <td><a class="btn btn-primary" style="padding: 1px 2px;"
              (click)="ver_UC(uc, ucModal)"> <i
                class="icofont icofont-pencil"
                style="font-size: 20px; color: white"></i>
            </a> <a class="btn btn-danger" style="padding: 1px 2px; color: white;"
              (click)="deleteClient(c)"> <i class="icofont icofont-bin"
                style="font-size: 20px"></i>
            </a> <a routerLink="/evenement" routerLinkActive="active" class="btn btn-warning" style="padding: 1px 2px;"
            (click)="choisir(b.id)"> <i class="icofont icofont-info"
                style="font-size: 20px; color: white"></i>
            </a> </td></tr></tbody></table></app-card>
      <!-- end of card-footer -->
    </div>
    <div class="col-lg-16">

      <!-- ajout paiment annuel -->


        <app-card [title]="'Liste des paiements annuel '" [classHeader]="true"
        [blockClass]="'table-border-style'">
        <div class="col-sm-6" style="margin-top: 18px;">
            <div ngbDropdown class="dropdown-success dropdown open">
              <button class="btn btn-success" (click)="ver_NC(nc, ncModal)">
                <i class="icofont icofont-plus-circle"></i>Paiement annuel
              </button>
            </div>
          </div>
      <table class="table table-hover" id="customers">
        <thead>
          <tr>
            <th>pacs</th>
            <th>Date de paiement</th>
            <th>Mode de paiement</th>
            <th>Montant</th>
            <th>Validé</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let c of clients" class="table-active"
            style="cursor: pointer;">
            <td>{{c.nom}}</td>
            <td>{{c.prenom}}</td>
            <td>{{c.cim}}</td>
            <td>{{c.nomsociete}}</td>
            <td>{{c.numerosociete}}</td>
            <td><a class="btn btn-primary" style="padding: 1px 2px;"
              (click)="ver_UC(uc, ucModal)"> <i
                class="icofont icofont-pencil"
                style="font-size: 20px; color: white"></i>
            </a> <a class="btn btn-danger" style="padding: 1px 2px; color: white;"
              (click)="deleteClient(c)"> <i class="icofont icofont-bin"
                style="font-size: 20px"></i>
            </a> <a class="btn btn-warning" style="padding: 1px 2px;"
              (click)="ver(c, cModal)"> <i class="icofont icofont-info"
                style="font-size: 20px; color: white"></i>
            </a> </td></tr></tbody></table></app-card>

    </div>
  </div>
  </div>
  <div class="col-lg-6" style="float: right;">
 <!-- ajout des pacs -->
    <app-card [title]="'Fiches pacs '" [classHeader]="true"
        [blockClass]="'table-border-style'">
        <div class="col-sm-6" style="margin-top: 18px;">
            <div ngbDropdown class="dropdown-success dropdown open">
              <button class="btn btn-success" (click)="ver_NC(nc, ncModal)">
                <i class="icofont icofont-plus-circle"></i>Nouveau pack
              </button>
            </div>
          </div>

        <ng-template #ncModal>
            <div class="modal-header" style="background-color: #28e1bd;">
              <h4 class="modal-title">Nouveau Client:</h4>
              <button type="button" class="btn cancel" data-dismiss="modal"
                (click)="goBack()">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <form name="form"
                (ngSubmit)="f.form.valid && save({title:'Message de confirmation', msg:'Client ajouté avec succès', timeout: 5000
                , theme:'bootstrap', position:'bottom-right', type:'success'})"
                #f="ngForm" novalidate>
                <div class="alert alert-danger" role="alert" *ngIf="errorMessage">{{errorMessage}}</div>
                <div class="card card-border-primary">
                  <div class="card-header">
                    <h5>Ajout</h5>
                  </div>
                  <div style="font-size: 13px" id="fiche" class="card-body row">
                    <div class="col-sm-12" style="font-size: 13px">


                      <div class="form-group row">
                        <div class="col-sm-3"
                          [ngClass]="{ 'has-error': f.submitted && !description.valid }">
                          <label style="font-family: verdana">Description:</label> <input
                            style="font-size: 13px;" type="text" class="form-control"
                            id="description" name="description" [(ngModel)]="produit.description" #description="ngModel"
                            required />
                          <div *ngIf="f.submitted && !description.valid"
                            class="form-control-danger col-form-label">description
                            requis</div>
                        </div>
                        <div class="col-sm-3"
                          [ngClass]="{ 'has-error': f.submitted && !date_deb.valid }">
                          <label style="font-family: verdana"> Date début: </label> <input
                            style="font-size: 13px;" type="date" class="form-control"
                            id="date_deb" name="date_deb" [(ngModel)]="produit.date_deb"
                            #date_deb="ngModel" required>
                          <div *ngIf="f.submitted && !date_deb.valid"
                            class="form-control-danger col-form-label">date début requis</div>
                        </div>
                        <div class="col-sm-3"
                          [ngClass]="{ 'has-error': f.submitted && !tarif.valid }">
                          <label style="font-family: verdana">Tarif:
                          </label> <input style="font-size: 13px; margin-bottom: 5px" type="number"
                            max="2000-01-01" class="form-control" id="tarif"
                            name="tarif" [(ngModel)]="produit.tarif"
                            #tarif="ngModel" required>
                          <div *ngIf="f.submitted && !tarif.valid"
                            class="form-control-danger col-form-label">tarif requise</div>
                        </div>
                        <div class="col-sm-3"
                          [ngClass]="{ 'has-error': f.submitted && !etat.valid }">

                          <label style="font-family: verdana">etat: </label> <input
                            style="font-size: 13px" type="text"
                            class="form-control" id="etat" name="etat"
                            [(ngModel)]="produit.etat" #etat="ngModel" required>
                          <div *ngIf="f.submitted && !etat.valid"
                            class="form-control-danger col-form-label">etat requis</div>
                        </div>
                        <div class="col-sm-3"
                          [ngClass]="{ 'has-error': f.submitted && !client.valid }">

                          <label style="font-family: verdana">client: </label> <input
                            style="font-size: 13px" type="number"
                            class="form-control" id="client" name="client"
                            [(ngModel)]="produit.client" #client="ngModel" required>
                          <div *ngIf="f.submitted && !client.valid"
                            class="form-control-danger col-form-label">etat requis</div>
                        </div>


                      </div>

                      <!-- Ligne 2 -->

                    </div>
                  </div>
                </div>

                <div class="row">
                  <div>
                    <button class="btn btn-primary btn-round"
                      style="height: 30px; text-align: center; padding-top: 5px; margin-left: 500%; margin-top: 10px; margin-bottom: 10px">Annuler</button>
                  </div>
                  <div>
                    <button class="btn btn-primary btn-round" type="submit"
                      style="height: 30px; text-align: center; padding-top: 5px; margin-left: 420%; margin-top: 10px; margin-bottom: 10px">Sauvegarder</button>
                  </div>
                </div>
              </form>
            </div>
            <div class="modal-footer"></div>
            </ng-template>
    <table class="table table-hover" id="customers">
      <thead>
        <tr>
          <th>pacs</th>
          <th>Date de debut</th>
          <th>Tarif</th>
          <th>etat</th>
          <th>action</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let p of produits" class="table-active"
          style="cursor: pointer;">
          <td>{{p.description}}</td>
          <td>{{p.date_deb}}</td>
          <td>{{p.tarif}}</td>
          <td>{{p.etat}}</td>
          <td><a class="btn btn-primary" style="padding: 1px 2px;"
            (click)="ver_UC(uc, ucModal)"> <i
              class="icofont icofont-pencil"
              style="font-size: 20px; color: white"></i>
          </a> <a class="btn btn-danger" style="padding: 1px 2px; color: white;"
            (click)="deleteClient(c)"> <i class="icofont icofont-bin"
              style="font-size: 20px"></i>
          </a> <a class="btn btn-warning" style="padding: 1px 2px;"
            (click)="ver(c, cModal)"> <i class="icofont icofont-info"
              style="font-size: 20px; color: white"></i>
          </a> </td></tr></tbody></table></app-card>
</div>

another sequence of the code:

here is my thml code of product:

import { Component, OnInit } from '@angular/core';
import { Produit } from '../../model/model.produit';
import { Client } from '../../model/model.client';
import { ProduitService } from '../../services/produit.service';
import { NgbModal } from '../../../../node_modules/@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-produit',
  templateUrl: './produit.component.html',
  styleUrls: ['./produit.component.css']
})
export class ProduitComponent implements OnInit {
  produits: Produit[]; //liste des clients
  produit: Produit = new Produit(); //nouveau client
  p: Produit[]; //modal liste client
  nc: Produit[]; //modal ajout client
  uc: Produit[]; //modal update client
  client: Client;
  constructor(private produitService: ProduitService , private modalService: NgbModal) { }

  ngOnInit() {
    this.getProduits();
    this.getValue(this.produit);
  }

  ver_NC(produit: Produit, modal) {
    p => this.p = p;
    this.modalService.open(modal, {size: 'lg'});
  }
  getProduits() {
    this.produitService.getProduits().then(produits => this.produits = produits);
  }
  save(client: Client) {
    // ajout client //

    this.produitService.createProduit(this.produit).subscribe(data => {
     this.goBack();
    }
    );}
    goBack(): void {
      window.location.replace('/produit');
    }
    getValue(produit:Produit){
      produit.client= this.client.id;
    }
}

Hi @messiane,

I merged all of your posts together to continue the conversation in one thread.  :smiley:

In the future, for conversations like this, please comment in the first topic to carry on the discussion. 

Also, this post was moved to a different board that fits your topic of discussion a bit better. This means you’ll get better engagement on your post, and it keeps our community organized so users can more easily find information.

As you’ll notice, your topic is now here in the Project Development Help and Advice board. No action is needed on your part; you can continue the conversation as normal here.

Cheers!