0

Yes, this old chestnut.

I'm making an editor for a large object tree, and it seemed sensible to make components for each of the property types at a vertex in the tree in order to remove clutter from the main component. However, this has created the problem that the main JSON object isn't being updated beause the editor is implemented in child components (@Input).

Using @Output and EventEmitter seems infeasible because:

  • how on earth do you get a component to call the emitter very time a change is made to the data it's editing, and
  • it seems really stupid to have to write an update function to handle the event because the UI should be just automatically bound to the JSON object it's editing -- that's the point of this observable malarkey.

The only solution I can think of is to not use components and just wirte a massive monolithic editor.

Is there a better way?

Richard Barraclough
  • 2,625
  • 3
  • 36
  • 54

1 Answers1

0

The way you describe is pretty standard. An alternative though would be to use a template # variable to access your child properties.

<hello #childcomponent name="{{ name }}"></hello>
<div>
  {{ childcomponent.name }} - Parent component
</div>

You can use this to access your child component through the typescript as well.

@ViewChild('childcomponent') childcomponent;

Stackblitz

abney317
  • 7,760
  • 6
  • 32
  • 56