Whats the best way to use jquery widgets inside angular 2?

Question

1. Will using Jquery widgets inside angular 2 components cause any issues with angular's construction of its shadow dom?

2. Whats the recommended way to use jquery widgets inside angular 2?

Answer 1

My understanding is that Angular supports shadow DOM at the component level, so I would assume you are free to trigger any DOM manipulation inside the component - without issue. It's however not recommended to access the DOM directly from components, but I guess there are valid use cases. The issue is that it introduces an often unnecessary and tight relationship to the DOM

Here is an example of how to integrate a jquery plugin with an Angular 2 component. I think most jquery widgets are modeled as plugins, so this should work in general.

    import {Component, ElementRef, OnInit} from '@angular/core';

    declare var jQuery:any;

    @Component({
        selector: 'jquery-integration',
        templateUrl: './components/jquery-integration/jquery-integration.html'
    })

    export class JqueryIntegration implements OnInit {

        constructor(private elementRef: ElementRef) {
        }

        ngOnInit() {
            jQuery(this.elementRef.nativeElement).find('.moving-box').draggable({containment:'#draggable-parent'});
        }
    }

Specifically this shows how to integrate the draggable plugin from jquery-ui.

Here is more info and a demo as well:

http://www.syntaxsuccess.com/viewarticle/using-jquery-with-angular-2.0

http://www.syntaxsuccess.com/angular-2-samples/#/demo/jquery