Angular 2/4 parent child communication

Question

i am programming app which has parent-child relationship, and i am looking for best-practice for handling data/event flow. parent has list of items which are sent to child component.

Child component has data entries for updating current values. At this moment, updating values are being handled from children. I've made following: when i get success from server,i just make sure that child values are ok. I've made possible that this data is propagated to parent (eventEmitter) but at this moment i am not doing anything with this? Should I be using two-way data binding here or not? Or should i use onActivityUpdated to propagate that item to parent? Should child be handling call to service and updating that value?

Children list is shown as a list (all data on same page), so it's possible to edit one child, then another, ... and then there should be save all option from parent. What is the most optimal way to handle this? Should parent initiate call to service and then change all values?

here's code so far, i've ommited most of the unneccessary stuff...

parent has a list of items, which is sent to children like this:

ts:

export class ParentComponent implements OnInit {
//Filtered items
@Input()
public items: Client[];

html:

<case-activity-time-edit-item *ngFor="let item of items; let i = index" [(element)]="items[i]" (activityUpdated)="onActivityUpdated($event)"></case-activity-time-edit-item></div>

here's child:

export class ChildComponent implements OnInit {
@Input()
public element: Client;

@Output()
public activityUpdated: EventEmitter<Client> = new EventEmitter<Client>();

If we are dealing with objects here, we need to remember that objects are mutable in JS, so in this case they are passed by reference, so whatever you do with the data in child, the parent will know even without the eventemitter. Just be careful, this might not always be what you want, but as it seems you want that to happen here. Also seems like some kind of form would be useful here, since you are talking about editing and saving the data. I'd use a reactive form, which is really awesome with plenty of functions! :) — AJT82

Carsten Carsten · Accepted Answer · 2017-10-11T11:57:07

Everything you're doing looks good. My only suggestion is to keep the parent and child value in sync using two way binding:

_element: Client;
@Input() set element(val) {
  this._element = val;
}
get element() {
  return this._element;
}

Angular 2/4 parent child communication

1 Answers