wrapping 3rd party components in angular2

Question

I want to use 3rd party ui elements/components in my angular2 app like e.g. spin.js. To use this library I would have to directly access the DOM which is not really the way it should be done in angular2 (for several reasons like for example server-side rendering):

var target = document.getElementById('foo')
var spinner = new Spinner(opts).spin(target);

Is there any advice on how to deal with such 3rd party libraries in angular2? Or is direct DOM manipulation the only way for now?

Answer 1

I would wrap it into a custom directive:

@Directive({
  selector: '[spinner]'
})
export class SpinnerDirective {
  constructor(private elementRef:ElementRef.nativeElement) {
  }

  ngAfterViewInit() {
    var spinner = new Spinner(opts).spin(this.elementRef);
  }
}

and use it this way:

@Component({
  (...)
  template: `
    <span spinner>...</span>
  `,
  directives: [ SpinnerDirective ]
})
export class SomeComponent {
  (...)
}