angular2 get the selector reference of a component

Question

I'm trying to integrate this library progressbar.js in angular2 app, the way this library works that you have to add the progressbar to a container by passing the selector name

var ProgressBar = require('progressbar.js');

// Assuming we have an empty <div id="container"></div> in HTML

var bar = new ProgressBar.Line('#container', {easing: 'easeInOut'});
bar.animate(1);  // Value from 0.0 to 1.0

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)

var ProgressBar = require('progressbar.js');
@Component({
  selector: 'progress-bar',
  template: `<div class="#pb-container"> </div>`
})
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);
}

Should I have a unique ID for each component or is there an angular way to fix this problem?

[The documentation](http://progressbarjs.readthedocs.io/en/latest/api/shape/) says that you can pass the DOM element itself instead of a selector. See http://stackoverflow.com/questions/32693061/angular-2-typescript-get-hold-of-an-element-in-the-template for how to get the DOM element of the component. — JB Nizet, Jun 12 '16 at 15:24

Murhaf Sousli · Accepted Answer · 2016-06-13T08:46:05.270

Thanks to @JBNizet comment, problem was solved by passing this.elementRef.nativeElement instead of #pb-container

var ProgressBar = require('progressbar.js');
@Component({
  selector: 'progress-bar',
  template: ''    // <= no need for a container anymore 
})
export class ProgressBarCmp {

  @Input() color;
  @Input() strokeWidth;

  constructor(private elementRef:ElementRef){
  }

  ngOnInit() {
    this.bar = new ProgressBar.Circle(this.elementRef.nativeElement, {      
      color: this.color,
      strokeWidth: this.strokeWidth,
    });
    this.bar.animate(this.skill.grade / 100);
}

angular2 get the selector reference of a component

1 Answers1