title: angular2 get the selector reference of a component
body: <p>I'm trying to integrate this library <a href="https://kimmobrunfeldt.github.io/progressbar.js/" rel="nofollow">progressbar.js</a> in angular2 app, the way this library works that you have to add the progressbar to a container by passing the selector name </p>
  
  <pre><code>var ProgressBar = require('progressbar.js');
  
  // Assuming we have an empty &lt;div id="container"&gt;&lt;/div&gt; in HTML
  
  var bar = new ProgressBar.Line('#container', {easing: 'easeInOut'});
  bar.animate(1);  // Value from 0.0 to 1.0 
  </code></pre>
  
  <p>The problem here is when I want multiple progress-bars and each one should be contained in its own component otherwise all the progress-bars will be added to the same container (which is not what I want)</p>
  
  <pre><code>var ProgressBar = require('progressbar.js');
  @Component({
    selector: 'progress-bar',
    template: `&lt;div class="#pb-container"&gt; &lt;/div&gt;`
  })
  export class ProgressBarCmp {
  
    @Input() color;
    @Input() strokeWidth;
  
    ngOnInit() {
      this.bar = new ProgressBar.Circle('#pb-container', {      
        color: color,
        strokeWidth: strokeWidth,
      });
      this.bar.animate(this.skill.grade / 100);
  }
  </code></pre>
  
  <p>Should I have a unique ID for each component or is there an angular way to fix this problem?</p>