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?

Can you share your plunker demo because even i am trying to build a directive... so that i can use your code as a reference and proceed...Please sir — abhilash reddy
– abhilash reddy, Commented May 3, 2016 at 2:47

Thierry Templier · Accepted Answer · 2016-05-03 08:41:00Z

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 { (...) }

Thanks, it worked, except that I had to use elementRef.nativeElement inside the spin method
My component decorator doesn't take a directives argument (using TypeScript). Is this a limitation of TypeScript or is there a different official way to add directives to a component?

Collectives™ on Stack Overflow

wrapping 3rd party components in angular2

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related