4

  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?

pdeva
  • 43,605
  • 46
  • 133
  • 171
  • When you say "jQuery widgets", are you referring to jQuery UI? – greenie2600 Jan 04 '16 at 21:27
  • yes, that and all the other tons of widgets out there that use jquery internally for dom manipulation. – pdeva Jan 04 '16 at 21:28
  • [possible duplicate](http://stackoverflow.com/questions/30623825/how-to-use-jquery-with-angular2) – Blazemonger Jan 04 '16 at 21:29
  • nope the answer to that question doesnt manipulate the gui. it simply queries it and sets internal state. this question is not about jquery in general but specifically about modifying dom elements with jquery – pdeva Jan 04 '16 at 21:30
  • You will want to use directives. You can roll your own, or use a directive that someone else has written (if you can find a decent one). [AngularUI](https://angular-ui.github.io/) is a collection of common UI libraries turned into Angular directives. They have jQuery UI's Date, Slider and Sortable, but there doesn't seem to be a comprehensive suite of Angular directives for all jQuery UI controls. – greenie2600 Jan 04 '16 at 21:31
  • 1
    @greenie2600 you are talking about angular 1. this question is specifically about angular 2 which maintains a shadow dom internally (angular 1 doesnt) – pdeva Jan 04 '16 at 21:32
  • D'oh; you are correct. Sorry. – greenie2600 Jan 04 '16 at 21:33

1 Answers1

10

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

TGH
  • 38,769
  • 12
  • 102
  • 135