I want to use 3rd party ui elements/components in my angular2 app like eg 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?
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 {
(...)
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.