How to update array on input change using async in angular 5?

Question

I want to create a solution to update observable array objects on input change

I am creating a table from an array using ngFor from angular having one text field with bid value.

What I want is whenever user updated text field, object consist of that bid value should be automatically updated

Here is my code

Template file:

<table class="table table-striped applist-table table-bordered">
  <thead>
    <tr>
      <th width="10%" class="text-center">App Id</th>
      <th width="40%">App/Site Name</th>
      <th width="30%">Exchange Name</th>
      <th width="20%">Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let a of apps | async">
      <td width="15%" class="text-center">{{ a.sid }}</td>
      <td width="40%">{{ a.appName }}</td>
      <td width="30%">{{ a.exchange }}</td>
      <td width="15%">
        <div class="input-group">
          <input type="text" class="form-control" value="{{a.dynamic_bid}}" #bid />
          <div class="input-group-append">

          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

component.ts

apps: Apps[] = [];
openBidUpdateOptions(content) {
  this.loading = true;

  this._campaignOperations.loadCampaignApplistData(this.id).subscribe(
    data => {
      if (data.status == 1200) {
        this.loading = false;
        this.apps = data.data;
        this.modalReference = this.modalService.open(content, {
          size: 'lg'
        });
        this.modalReference.result.then((result) => {

        }, (reason) => {

        });

        this.loading = false;
      } else {

        let str: any = '';
        let errorList = data.errors;
        for (let i in errorList) {
          str += errorList[i] + "<br>";
        }

        this.toastr.error(str, 'Error');
        this.loading = false;
        return false;
      }

    },
    error => {
      swal({
        position: 'center',
        type: 'error',
        title: 'Unable to create campaign due to unknown error',
        showConfirmButton: false,
        timer: 1500
      });
      this.loading = false;
      return false;
    });
}

export interface Apps {
  id ? : string;
  sid ? : string;
  appName ? : string;
  exchange ? : string;
  dynamic_bid ? : string;
}

Here is demo for same : https://stackblitz.com/edit/angular-kmjrqd

Nope i already have array from retrieved from backend i want to update specific object on input change — Ripul Chhabra
– Ripul Chhabra, Commented Nov 22, 2018 at 10:03
Can you update your example in stackblitz so the problem can be more clear — Shorbagy
– Shorbagy, Commented Nov 22, 2018 at 10:22
sure here it is, stackblitz.com/edit/angular-kmjrqd whenever textbox updates i want object in array should be updated — Ripul Chhabra
– Ripul Chhabra, Commented Nov 22, 2018 at 10:37
as @bluray suggests to make it [(ngModel)] this is the robust solution and will make your task very will — Shorbagy
– Shorbagy, Commented Nov 22, 2018 at 11:31

bluray · Accepted Answer · 2018-11-22 09:44:09Z

2

I dont sure if I understand your problem. But I think you can use ngModel:

  <input type="text" class="form-control" [(ngModel)]="a.dynamic_bid" #bid />

answered Nov 22, 2018 at 9:44

bluray

1,9636 gold badges40 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ripul Chhabra Over a year ago

Nope, this wont work, here i will have multiple rows with each having text field consist of bid value. i don't want to write any click on input change event. whenever input value updates i want that specific property to be updated on same array. i can make this possible by other ways as well but don't want to make more complex

Asanka Over a year ago

So what is wrong in this answer. you have 2 way databinding and your array will be updated?

Asanka Over a year ago

check this stackblitz.com/edit/angular-rcyknu?file=src/app/…

Ripul Chhabra Over a year ago

Thanks, sorry i was not aware of solution

Collectives™ on Stack Overflow

How to update array on input change using async in angular 5?

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related