title: Angular: which is better -- use chained observable subscribes or wrap with a property?
body: <p>Learning to use Angular 4, I'm wondering whether components binding a Property, that in turn invokes a service is more 'expensive' than chaining the subscriptions to an observable. Consider the following:</p>
  
  <p>The POC I'm working with has a MenuComponent, which is relying on a local MenuService, which is in turn using a common NavigationService, which is in turn using http to fetch navigation information as json.</p>
  
  <pre><code>/Navigation/MenuComponent
             /MenuService
  /Services/NavigationService
  </code></pre>
  
  <p>The <code>MenuComponent</code> has a <code>NavigationDetails[]</code> public <code>Property</code> that in turn wraps a  <code>NavigationDetails[]</code> public <code>Property</code> within the local <code>MenuService</code>, which in turn is wrapping a <code>NavigationDetails[]</code> public <code>Field</code> within the NavigationService, that was filled when the subscription to the http response triggered.</p>
  
  <p>Somehow it gets triggered (is it working via polling?) and the UI Component refreshes. Neat.</p>
  
  <p>But <code>NavigationService</code> could have instead created a public <code>Observable&lt;NavigationDetails[]&gt;</code> property, that the <code>MenuService</code> could have subscribed to, which in turn the <code>MenuComponent</code> could have subscribed to... it's less abstracted than the first option in that <code>MenuService</code> has to not only include references to <code>Observables</code>, etc. but also <code>subscribe()</code>, etc, making the code more brittle to maintain. But if the first option is computationally intense (eg: via Polling) then maybe it's necessary?</p>
  
  <p>Is there a generally accepted/recommended way to keep components blithfully unaware of common global services and just rely local services properties?</p>
  
  <p>Thanks! </p>