title: Angular2 Parent Component with multiple instances of child component
body: <p>I have a parent component with a template that references multiple instances of the same child component. The child components would have the same component/template implementation but should be instantiated multiple times and would render different data sets. I looked into a lot of posts like <a href="https://stackoverflow.com/questions/34818238/instance-angular-2-component-two-times">Instance Angular 2 Component Two times</a> but all of them seemed to use the deprecated directives component attribute.</p>
  
  <p>parent.template.html</p>
  
  <pre><code>&lt;child-component data="foo"&gt;&lt;/child-component&gt;
  &lt;child-component data="baz"&gt;&lt;/child-component&gt;
  </code></pre>
  
  <p>data.service.ts</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  
  @Injectable()
  export class DataService {
      getFooData(): Object {
          return { name: 'Foo' }
      }
  
      getBazData(): Object {
          return { name: 'Baz' }
      }
   }
  </code></pre>
  
  <p>child.template.html</p>
  
  <pre><code>&lt;h1&gt;{{objectToRender.name}}&lt;/h1&gt;
  </code></pre>
  
  <p>child.component.ts</p>
  
  <pre><code>import { Component, Input, OnInit } from '@angular/core';
  import { DataService }              from './data.service';
  
  @Component({
      selector:       'child-component',
      templateUrl:    'child.template.html',
      providers:      [ DataService ]
  })
  export class ChildComponent  implements OnInit {
      @Input() data: String;
      objectToRender: Object;
      ds:             DataService
  
      constructor( private dataService: DataService ) {
          this.ds = dataService;
      }
  
      ngOnInit(){
          switch( this.data ) {
              case 'foo':
                  this.objectToRender = this.ds.getFooData();
              case 'baz':
                  this.objectToRender = this.ds.getBazData();
          }
      }
  
  }    
  </code></pre>
  
  <p>app.module.ts</p>
  
  <pre><code>import { NgModule }             from '@angular/core';
  import { BrowserModule }        from '@angular/platform-browser';
  import { AppComponent }         from './app.component';
  import { ParentComponent}     from './parent.component';
  import { ChildComponent }     from './child.component';
  
  
  @NgModule({
      imports:      [ BrowserModule ],
      declarations: [ AppComponent, ParentComponent, ChildComponent ],
      bootstrap:    [ AppComponent ]
  })
  export class AppModule { }
  </code></pre>
  
  <p>Result:
  Baz
  Baz</p>
  
  <p>Expected:
  Foo
  Baz</p>
  
  <p>An even simplified version of my problem can be seen in this Plunker. I've omitted template files all together and use the root app component as a parent.
  <a href="https://plnkr.co/edit/QI5lGH3S9a5o3b1ajPBl?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/QI5lGH3S9a5o3b1ajPBl?p=preview</a></p>
  
  <p>Many Thanks in advance !</p>