title: How to provide separate service instances for multiple child components in Angular 2
body: <p>I have an application which has multiple cases of a fairly similar master-details view with a search box. So I decided to wrap the common functionality into its own module with communication between the components achieved through a service. Here is the hierarchy:</p>
  
  <pre><code>MyGenericGridModule
      SearchComponent
      MasterGridComponent
      DetailsComponent
      GridService &lt;-- stateful
  
  AppModule
      CitiesGridComponent
      RetailersGridComponent
  </code></pre>
  
  <p>I intend to create multiple views of <code>MyGenericGridComponent</code> where the layout differences will be achieved through css. Here is quick illustration:
  <a href="https://i.stack.imgur.com/8SdoN.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/8SdoN.jpg" alt="enter image description here"></a>
  How do I ensure that I provide separate instances of the <code>GridService</code> to both dependent components?</p>
  
  <p>I haven't found reading material so far that showcases this scenario. What I have read mentions Services should be shared and singletons. This leads me to believe I am tackling this problem incorrectly. Is there a more suitable pattern I can structure the components?</p>