title: Angular 5 create multiple Instances of one Service
body: <p>I have a WebApp showing 3 virtual mobile devices at the same time.</p>
  
  <p>Each device consists of a <code>mobile_container</code>.
  I put my <code>mobile_container</code> in my root-component like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;app-mobile-container [fruit]="apple"&gt;&lt;/app-mobile-container&gt;
    &lt;app-mobile-container [fruit]="orange"&gt;&lt;/app-mobile-container&gt;
    &lt;app-mobile-container [fruit]="strawberry"&gt;&lt;/app-mobile-container&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  
  <code>fruit</code> is an Inputt which says the container which data he needs to access and display. This works fine</p>
  
  <p>I created a Service <code>toggleService</code> to toggle the different Views in on of the Containers this works great too.
  It looks like this:
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Injectable } from '@angular/core';
  @Injectable()
  export class ToggleService {
      constructor() {
      }
      tabs: { name: string, visibility: boolean }[] = [
          { "name": "MainView", "visibility": true },
          { "name": "DetailView", "visibility": false },
      ];
      
      changeTab(index: number) {
          //changes View for example to "DetailView"
      }
      goToPrevTab() {
          //changes View for example back to "MainView"
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>But if i paste 3 <code>mobile_containers</code> and click for example the <code>DetailView</code>-Component it changes the View in all <code>mobile_containers</code> and not only in the clicked one. This is because every container shares the same <code>toggleService</code> with each other.</p>
  
  <p>How can i tell my <code>mobile-containers</code> to create a <code>toggleService 1</code>, <code>toggleService 2</code>, <code>toggleService 3</code>. So that they don´t access the same <code>toggleView.tabs</code>?</p>