CODEWITHSUNDEEP
javascripthtmlangular
Neha Uniyal
Neha Uniyal

Reputation: 175

Binding change event on table value

I am new to Angular and I need help on writing an event that can pass the changed value from the table to my component. Below is the table cell so that when the user changes that value, it should pass it to the component.ts.

HTML:

<tbody contenteditable='true'>

  <tr *ngFor="let item of calendarTableSelected">

    <td input type="text" (ngModelChange)="saveCalendar($event)" [ngModel]="name.value" *ngFor="let name of item.results" name="promoOne" ngDefaultControl>
      {{name.value}}

    </td>

  </tr>

</tbody>

Component.ts:

saveCalendar($event): void {
  console.log("Updated Value" + this.tableValue); // updated value
  this.body = {
    "promotionname": this.promotionname,
    "period": this.period,
    "indicator": this.indicator,
    "value": this.value
  };
  this.services.saveCalendar(this.body)
    .then(
      response => {
        if (response == "Success") {
          this.firstPage(this.clickedItem);
        }
      }
    );

}

But it is not triggering the event. Please help me if I am missing anything here.

Upvotes: 2

Views: 3375

Answers (1)

Pete
Pete

Reputation: 794

It doesn't appear that your HTML is formatted correctly. Try adding the input inside of a table cell. The name attribute must also be unique:

<tbody>

  <tr *ngFor="let item of calendarTableSelected">

    <td>
      <input type="text" *ngFor="let name of item.results" (ngModelChange)="saveCalendar($event)" [ngModel]="name.value"  [name]="name.value"/>
    </td>

  </tr>

</tbody>

Upvotes: 2

Related Questions