title: How to reuse a custom Angular2 component multiple time on a page?
body: <p>I have a simple Angular2 component called employee which populates and returns a HTML template based on the value of its attribute. E.g. </p>
  
  <p>If I use,  in my index.html - it will call my employeeComponent which will fetch data based on the attribute id( in this case "123") from database and populate html template. Let say for simplistic reason, it populates name for that employee and return something like 
      <h2>{{employee_name}}</h2>. </p>
  
  <p>This works fine first time, I call component and on subsequent calls it does not display any error nor does it render for </p>
  
  <pre><code>&lt;employee id="123"&gt;&lt;/employee&gt;
  &lt;employee id="121"&gt;&lt;/employee&gt;
  &lt;employee id="122"&gt;&lt;/employee&gt;
  </code></pre>
  
  <p>I want flexibility where I don't want to restrict number of  tags. Since this is a 'view component' I dont want it be restricted inside main/app component. I want pure view reusability.</p>
  
  <p>employee.component.ts</p>
  
  <pre><code>import {Component,  ElementRef}  from 'angular2/core';
  
  
  @Component({
      selector: 'employee',   
      template: '{{id}}'
  })
  
  export class EmployeeComponent {
       id: number;
       name : string;
  
      constructor(elm: ElementRef){
           this.id = elm.nativeElement.getAttribute('id');
           console.log(elm.nativeElement);
      }
  
  }
  </code></pre>
  
  <p>index.html </p>
  
  <pre><code> &lt;employee id="123"&gt;&lt;/employee&gt;
    &lt;employee id="121"&gt;&lt;/employee&gt;
    &lt;employee id="122"&gt;&lt;/employee&gt;
  </code></pre>
  
  <p>main.ts</p>
  
  <pre><code>import {bootstrap}    from 'angular2/platform/browser';
  import {AppComponent} from './app.component';
  import {EmployeeComponent} from './employee.component';
  
  bootstrap(AppComponent);
  bootstrap(EmployeeComponent);
  </code></pre>
  
  <p>Any help appreciated to resolve this issue?</p>