title: Best Practice: Generic Component with different services
body: <p>Let's say we have a TableComponent. The TableComponent's purpose is to show super heroes and to remove/add them. To do that, it uses the HeroService.</p>
  
  <pre><code>TableComponent {
    constructor() {
      heroService: HeroService
    }
    getList() {
      this.heroService.getHeroes().subscribe(...)
    }
    addCharacter(character: Character) {
      this.heroService.postHero(character).subscribe(...)
    }
    removeCharacter(character: Character) {
      this.heroService.deleteHero(character).subscribe(...)
    }
  }
  </code></pre>
  
  <p>Now we want to use the same TableComponent for our super villains. The villainService already exists and is ready to use. Also the super heroes and the super villains share despite all their dissension the same class. The only thing that differs is their service. What is the cleanest way to implement it?</p>
  
  <p>My first idea was to expand both services like:</p>
  
  <pre><code>tableOptions {
    getList: this.getHeroes,
    addObject: this.postHero,
    deleteObject: this.deleteHero
  }
  </code></pre>
  
  <p>and to modify the component like:</p>
  
  <pre><code>TableComponent {
    Input() service; // HeroService or VillainService
  
    getList() {
      this.service.tableOptions.getList.subscribe(...)
    }
    addCharacter(character: Character) {
      this.service.tableOptions.addObject(character).subscribe(...)
    }
    removeCharacter(character: Character) {
      this.service.tableOptions.deleteObject(character).subscribe(...)
    }
  }
  </code></pre>
  
  <p>but I hoped for some best practice tips that might be cleaner. Thanks in advance!</p>