I have a list in list-components as like as given below:
list.components.ts
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
import { EditModalComponent } from "...../edit-modal.component";
@Component({
selector: 'list',
templateUrl: './list.component.html',
providers: [ Service ]
})
export class ListComponent implements OnInit {
bsModalRef: BsModalRef;
list:[];
constructor(private modalService: BsModalService, private service: Service) { }
ngOnInit() { this.service.getList().subscribe(data => this.list = [...data ] ) }
edit({ thisData }) {
const initialState = { data: thisData };
this.bsModalRef = this.modalService.show(EditModalComponent, { initialState });
this.bsModalRef.content.updateSingleValue = (id, name, value) => this.service.update(id, { [name]: value })
}
}
list.components.html
<table-list [(data)]="list" (action)="edit($event)"></table-list>
Now calling table-list component as like as given below:
table-list.components.ts
@Component({
selector: "table-list",
inputs: ["data"],
templateUrl: "./table-list.components.html"
})
export class TableListComponent implements OnInit, OnChanges {
@Input() data: any[];
@Output() editAction = new EventEmitter();
handleEdit($root) {
this.editAction.emit({ thisData: $root });
}
ngOnChanges(changes: SimpleChanges) {
// this will execute in every form data update
}
}
table-list.components.html
<table>
<tr *ngFor="let $root of data">
<td> {{ $root.name }} </td>
<td> {{ $root.email}} </td>
<td> <button (click)="handleEdit()">edit</button> </td>
</tr>
</table>
Here as you can see, just displaying list of data and a edit button. when user click on edit button, it will call edit({ thisData }) method of list.component.ts. Then edit({ thisData }) method will open a modal with input form. So when user edit any form data, it will execute the following code and update single data. And it works properly.
this.bsModalRef.content.updateSingleValue = (id, name, value) => this.service.update(id, { [name]: value })
My problem is, when user update any form data, it will also update all list-data (list is re-generated). I just want to update single data from list (don't want to re-generate list). I put some debugger and found out that when any form data is updated, it trigger ngOnChanges(changes: SimpleChanges) of table-list.component.ts and re-generated the list.
How can I solve this problem? Thanks in advance.
