How to do inter communication between a master and detail component in Angular2?

Question

There is a master-detail example on the angular2 site. I can't follow the pattern in my example below.

In my example I have three components (1) customershome (2) customers and (3) customerdetails. The customershome compose customers (master) and customerdetails (details). In the customers component, I can select a customer and the details of the customer should be displayed in the customerdetails component.

How can I do the one-way communication from the customers component to the customerdetails component?

<div style="display: flex;">     <div style="width:25vw">         <customers></customers>     </div>     <div style="width:75vw; margin:5px">         <customerdetails></customerdetails>     </div> </div> 

Answer 1

Here's a simple app that uses a parent <customer-browser> component with <customer-list> and <customer-detail> subcomponents.

http://plnkr.co/edit/aEjlwIKKhcErWAnIhY3C?p=preview

The browser itself simply accepts an array of customers as an input, and has an internal selectedCustomer property.

The list component accepts the same list, and exposes a "selected" property, and emits a selectedChange output event. This syntax allows two way binding, and that gets bound to the parent's selectedCustomer property.

The detail component simply takes an customer input which is bound to the parent's selectedCustomer property.