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>