interface Medicament { idMeds:number; titleMeds:string; perDay:number; days:number; } //after class medicaments: Medicament[] = []; // initial interface medd:any; // object to set interface content idMeds:number; // id of selected medicament titleMeds:string; // title of selected medicament perDay:number; // numbers of tablets of selected medicament days:number; // numbers of days to take of selected medicament // when we change input of days changeDays(event:any){ console.log(event.target.value); this.days=event.target.value; } // when we change input of perDay ( how many pelicule per day ) changeperDays(event:any){ console.log(event.target.value); this.days=event.target.value; } // when click in button to add Our input values and select to interface addMeds(){ const id: number =this.idMeds; const meds : string = this.titleMeds; const days : number = this.days; const perday: number = this.perDay; this.medicaments.push({ idMeds:id, titleMeds:meds, perDay:perday, days:days, }); this.medd=this.medicaments; // <=== put my content of Interface to object for loop console.log(this.medd); console.log('message'); } // button to delete element from interface deleteMeds(i:number){ for (let index = 0; index < this.medd.length; index++) { if (this.medd[index].idMeds === i) { this.medd.splice(index, 1); } } this.medicaments = this.medd; } Change(e : any){ //alert("test"); console.log(e.target.value); let id : number= e.target.value; this.idMeds = id ; // go to service to get the Medication details (id, title , perday,days ) this.cServive.getMedicationById(id).subscribe((res: any)=>{ console.log(res); this.days=res.numberOfDays; // initialise input days this.perDay=res.pillsPerDay; // initialise input perday this.titleMeds=res.name; },(error: any) => { console.log(error); if(error.status == 400 || error.status == 0){ // Bad Request alert("Error Connexion Server"); } ************************ HTML ************************************** // this select to change input per day and days <select class="form-select" id="titleMed" name="titleMed" (change)="Change($event)"> <option *ngFor="let m of Medication" [value]="m.id">{{(m.name)}}</option> </select> <input type="text" class="form-control" id="perDay" name="perDay" [value]="perDay" (change)="changeperDays($event)"> <input type="text" class="form-control" id="daysNb" name="daysNb" [value]="days" (change)="changeDays($event)" > // We use object (medd : any) instead of my interface to fetch element <tr *ngFor="let m of medd ; let i = index"> <th>{{m.idMeds}}</th> <td>{{m.titleMeds}}</td> <td>{{m.days}}</td> <td>{{m.perDay}}</td> <td> <ul class="list-inline mb-0"> <li class="list-inline-item"> <a href="javascript:void(0);" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete" class="px-2 text-danger" (click)="deleteMeds(i)"> <i class="bx bx-trash-alt font-size-18"><i class="feather icon-delete"></i></i></a> </li> </ul> </td>