title: Angular 2 Sibling Component Communication
body: <p>I have a ListComponent.  When an item is clicked in ListComponent, the details of that item should be shown in DetailComponent.  Both are on the screen at the same time, so there's no routing involved.</p>
  
  <p>How do I tell DetailComponent what item in ListComponent was clicked?</p>
  
  <p>I've considered emitting an event up to the parent (AppComponent), and have the parent set the selectedItem.id on DetailComponent with an @Input.  Or I could use a shared service with observable subscriptions.</p>
  
  <hr>
  
  <p><strong>EDIT:</strong> Setting the selected item via event + @Input doesn't trigger the DetailComponent, though, in case I were to need to execute additional code.  So I'm not sure this is an acceptable solution.</p>
  
  <hr>
  
  <p>But both of these methods seem far more complex than the Angular 1 way of doing things which was either through $rootScope.$broadcast or $scope.$parent.$broadcast.</p>
  
  <p>With everything in Angular 2 being a component, I'm surprised there's not more information out there about component communication.</p>
  
  <p>Is there another/more straightforward way to accomplish this?  </p>