How to update ng2-smart-table value on editing one of the cells?

Question

In my application I am using akveo/ng-2-smart-table. In one of its column I use custom component with select HTML element to select an item from my data. When I select an element, I would like to update value of another cell in its row.

How can I do it?

For example, this is my component:

@Component({
    selector: 'ngx-template-field-select',
    template: `
        <div class="form-group">
            <select
                    name="fields"
                    class="form-control"
                    (change)="onChange()">

                    <option *ngFor="let field of fields"
                            [value]="field.id">{{ field.name }}</option>
            </select>
        </div>
    `,
})

export class EditTemplateFieldComponent extends DefaultEditor implements OnInit {

    @Input()
    public value: string;

    @Input()
    public rowData: any;

    public fields = [];

    constructor(
        public fieldsService: FieldsService,
    ) {
        super();
    }

    public ngOnInit(): void {
        this.fieldsService.getEntityList().subscribe(
            (value: FieldType[]) => {
                this.fields = value;
            });
    }

    onChange() {
        this.cell.setValue(this.value);
    }
}

Answer 1

In your component

  obj = {
    id: '',
    name: ''
  }

constructor(private fb: FormBuilder) {
  this.demoForm = this.fb.group({
    fields: []
  });
}
// You can look for the value changes of select, which you can subscribe to
this.demoForm.valueChanges.subscribe(
  id => {
    if(id) {
      this.countries.forEach(value => {
      if(value.id === id) {
        this.obj = value;
    }
  })
} else {
  this.obj = null; // or assign for empty object
}

and in your view

 <div class="form-group">
  <form [formGroup]="demoForm">
        <select formControlName="fields"
                name="fields"
                class="form-control">

                <option *ngFor="let field of fields"
                        [value]="field.id">{{ field.name }}</option>
        </select>
    </div>

<p>{{obj | json}}</p>

Hopefully, this helps and you get the idea of get going...