CODEWITHSUNDEEP
javascriptangularrxjsobservable
Ripul Chhabra
Ripul Chhabra

Reputation: 234

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

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

Upvotes: 1

Views: 1794

Answers (1)

bluray
bluray

Reputation: 1963

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 />

Upvotes: 2

Related Questions