title: Angular 4: How to handle cascading changes?
body: <p>I have a small app <a href="https://plnkr.co/edit/BmDskTa3BgG6m4Wnd2pq" rel="nofollow noreferrer">here</a>. <br/></p>
  
  <p><strong>What it does</strong>: It has 3 dropdowns which represent something like address selection - district, municipality and settlement. They are dependent on each other so what gets selected in one dropdown dictates the items in the next dropdown. There is a root component which passes 3 input number values to the child component (I added also some delay to simulate http call).</p>
  
  <p><strong>My goal</strong>: To be able to update immediately the values in the root component, whenever something changes in the child component (in AngularJS 1 we had the <code>=</code> option for the child directive scope). That's why I used two-way binding for the properties, you can see that I have to emit whenever something changes. I also want to pass the data as simple number properties, instead of binding the child component to some custom class with the 3 properties.</p>
  
  <p><strong>The problems I'm facing</strong>:<br/>
  1) I have to manually emit through <code>EventEmitter&lt;numner&gt;</code> whenever something changes (since I have 3 simple-type properties). <strong>We didn't have to do that in AngularJS 1, so is there a more flexible solution than that?</strong><br/>
  2) The app you're seeing works, because I added a call to <code>enableProdMode</code> in my <code>main.ts</code> file. That's because I need to violate the unidirectional flow rule of NG4+: this happens when a value in one dropdown changes, then I need to set the dependent value to null and update the items in the dependent dropdown in the OnChanges hook (e.g. when I change district, municipality has to be nullified). <strong>Is there a better approach to do this or it's ok to violate the rule knowing what you are doing?</strong></p>