Breaking News: Grepper is joining You.com. Read the official announcement!

typescript interface ngFor

Mohamed Sami khiari answered on April 6, 2023 Popularity 1/10 Helpfulness 1/10

answer typescript interface ngFor

typescript interface ngFor

Comment

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>

Popularity 1/10 Helpfulness 1/10 Language typescript

Source: Grepper

Tags: interface ngfor typescript

Link to this answer
Share Copy Link

Contributed on Apr 06 2023

Mohamed Sami khiari

0 Answers Avg Quality 2/10

typescript interface ngFor

Contents

More Related Answers

typescript interface ngFor

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.