What is the best way to use jquery widget inside angular 2?

Question

• Will using a jQuery widget inside angular 2 components cause problems with the w00> construct of its shadow dom?

• What is the recommended way to use jquery widgets inside angular 2?

Answer 1

I understand that Angular supports shadow DOM at the component level, so I assume that you can run any DOM manipulations inside the component - no problem. However, it is not recommended that you directly access the DOM from the components, but I think that there are valid use cases. The problem is that it introduces the often unnecessary and tough attitude towards the DOM

, jquery Angular 2. , jquery , .

    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'});
        }
    }

, , jquery-ui.

:

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

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