¿Cómo usar jQuery con Angular?

¿Alguien puede decirme cómo usar jQuery con Angular ?

class MyComponent {
    constructor() {
        // how to query the DOM element from here?
    }
}

Soy consciente de que existen soluciones alternativas, como manipular la clase o la identificación del elemento DOM por adelantado, pero espero una forma más limpia de hacerlo.

Usar jQuery de Angular2 es muy sencillo en comparación con ng1. Si está utilizando TypeScript, primero puede hacer referencia a la definición de mecanografiado de jQuery.

tsd install jquery --save
or
typings install dt~jquery --global --save

Las definiciones de mecanografiado no son necesarias, ya que podría usarlas anycomo tipo para $ojQuery

En su componente angular, debe hacer referencia a un elemento DOM de la plantilla usando @ViewChild()Después de que la vista se haya inicializado, puede usar la nativeElementpropiedad de este objeto y pasarla a jQuery.

Declarar $(o jQuery) como JQueryStatic le dará una referencia escrita a jQuery.

import {bootstrap}    from '@angular/platform-browser-dynamic';
import {Component, ViewChild, ElementRef, AfterViewInit} from '@angular/core';
declare var $:JQueryStatic;

@Component({
    selector: 'ng-chosen',
    template: `<select #selectElem>
        <option *ngFor="#item of items" [value]="item" [selected]="item === selectedValue">{{item}} option</option>
        </select>
        <h4> {{selectedValue}}</h4>`
})
export class NgChosenComponent implements AfterViewInit {
    @ViewChild('selectElem') el:ElementRef;
    items = ['First', 'Second', 'Third'];
    selectedValue = 'Second';

    ngAfterViewInit() {
        $(this.el.nativeElement)
            .chosen()
            .on('change', (e, args) => {
                this.selectedValue = args.selected;
            });
    }
}

bootstrap(NgChosenComponent);

Este ejemplo está disponible en plunker: http://plnkr.co/edit/Nq9LnK?p=preview

tslint se quejará de chosenno ser una propiedad en $, para solucionar esto puede agregar una definición a la interfaz JQuery en su archivo personalizado * .d.ts

interface JQuery {
    chosen(options?:any):JQuery;
}    

¿Por qué todos lo están convirtiendo en una ciencia espacial? Para cualquier otra persona que necesite hacer algunas cosas básicas sobre elementos estáticos, por ejemplo, bodyetiqueta, simplemente haga esto:

1. En index.html, agregue la scriptetiqueta con la ruta a su lib jquery, no importa dónde (de esta manera también puede usar etiquetas condicionales de IE para cargar una versión inferior de jquery para IE9 y menos).
2. En su export componentbloque, tenga una función que llame a su código: $("body").addClass("done");normalmente esto causa un error de declaración, así que justo después de todas las importaciones en este archivo .ts, agregue declare var $:any;y ¡listo!

Esto es lo que funcionó para mí.

PASO 1 - Primero lo primero

// In the console
// First install jQuery
npm install --save jquery
// and jQuery Definition
npm install -D @types/jquery

PASO 2 - IMPORTACIÓN

// Now, within any of the app files (ES2015 style)
import * as $ from 'jquery';
//
$('#elemId').width();

// OR

// CommonJS style - working with "require"
import $ = require('jquery')
//
$('#elemId').width();

#UPDATE - Feb - 2017

Últimamente, estoy escribiendo código con en ES6lugar de typescripty puedo importsin * as $en el import statement. Así es como se ve ahora:

import $ from 'jquery';
//
$('#elemId').width();

Buena suerte.

Ahora se ha vuelto muy fácil. Puede hacerlo simplemente declarando la variable jQuery con cualquier tipo dentro del controlador Angular2.

declare var jQuery:any;

Agregue esto justo después de las declaraciones de importación y antes del decorador de componentes.

Para acceder a cualquier elemento con id X o Class X solo tienes que hacer

jQuery("#X or .X").someFunc();

Una manera simple:

1. incluir script

index.html

<script type="text/javascript" src="assets/js/jquery-2.1.1.min.js"></script>

2. declarar

my.component.ts

declare var $: any;

3. uso

@Component({
  selector: 'home',
  templateUrl: './my.component.html',
})
export class MyComponent implements OnInit {
 ...
  $("#myselector").style="display: none;";
}

Por favor, siga estos sencillos pasos. Funcionó para mi. Comencemos con una nueva aplicación angular 2 para evitar confusiones. Estoy usando Angular cli. Por lo tanto, instálelo si aún no lo tiene. https://cli.angular.io/

Paso 1: crea una aplicación de demostración angular 2

ng new jquery-demo

Puedes usar cualquier nombre. Ahora verifique si está funcionando ejecutando debajo de cmd. (Ahora, asegúrese de estar apuntando a 'jquery-demo' si no usa el comando cd)

ng serve

verá "¡la aplicación funciona!" en el navegador

Paso 2: Instalar Bower (un administrador de paquetes para la web)

Ejecute este comando en cli (asegúrese de apuntar a 'jquery-demo' si no usa el comando cd):

npm i -g bower --save

Ahora, después de la instalación exitosa de bower, cree un archivo 'bower.json' utilizando el siguiente comando:

bower init

Solicitará entradas, solo presione enter para todos si desea valores predeterminados y al final escriba "Sí" cuando le pregunte "¿Se ve bien?"

Ahora puede ver un nuevo archivo (bower.json) en la carpeta "jquery-demo". Puede encontrar más información en https://bower.io/

Paso 3: Instalar jquery

Ejecute este comando

bower install jquery --save

Creará una nueva carpeta (bower_components) que contendrá la carpeta de instalación de jquery. Ahora tiene jquery instalado en la carpeta 'bower_components'.

Paso 4: Agregue la ubicación de jquery en el archivo 'angular-cli.json'

Abra el archivo 'angular-cli.json' (presente en la carpeta 'jquery-demo') y agregue la ubicación de jquery en "scripts". Se verá así:

"scripts": ["../bower_components/jquery/dist/jquery.min.js"
              ]

Paso 5: escriba un código jquery simple para probar

Abra el archivo 'app.component.html' y agregue una línea de código simple. El archivo se verá así:

<h1>
  {{title}}
</h1>
<p>If you click on me, I will disappear.</p>

Ahora abra el archivo 'app.component.ts' y agregue la declaración de variable jquery y el código para la etiqueta 'p'. También debe usar el ciclo de vida hook ngAfterViewInit (). Después de hacer cambios, el archivo se verá así:

import { Component, AfterViewInit } from '@angular/core';
declare var $:any;

@Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
})
export class AppComponent {
     title = 'app works!';

     ngAfterViewInit(){
           $(document).ready(function(){
             $("p").click(function(){
             $(this).hide();
             });
           });
     }
}

Ahora ejecute su aplicación angular 2 usando el comando 'ng serve' y pruébelo. Deberia de funcionar.

Puede implementar el enlace de ciclo de vida ngAfterViewInit () para agregar algunas manipulaciones DOM

ngAfterViewInit() {
            var el:any = elelemtRef.domElement.children[0];
            $(el).chosen().on('change', (e, args) => {
                _this.selectedValue = args.selected;
            });
}

Tenga cuidado al usar el enrutador porque angular2 puede reciclar vistas ... por lo que debe asegurarse de que las manipulaciones de los elementos DOM se realicen solo en la primera llamada de afterViewInit ... (Puede usar variables booleanas estáticas para hacerlo)

class Component {
    let static chosenInitialized  : boolean = false;
    ngAfterViewInit() {
        if (!Component.chosenInitialized) {
            var el:any = elelemtRef.domElement.children[0];
            $(el).chosen().on('change', (e, args) => {
                _this.selectedValue = args.selected;
            });
            Component.chosenInitialized = true;
        }
    }
}

Lo hago de una manera más simple: primero instalo jquery by npm en la consola: npm install jquery -Sy luego en el archivo de componente, simplemente escribo: ¡ let $ = require('.../jquery.min.js')y funciona! Aquí ejemplo completo de algunos mi código:

import { Component, Input, ElementRef, OnInit } from '@angular/core';
let $ = require('../../../../../node_modules/jquery/dist/jquery.min.js');

@Component({
    selector: 'departments-connections-graph',
    templateUrl: './departmentsConnectionsGraph.template.html',
})

export class DepartmentsConnectionsGraph implements OnInit {
    rootNode : any;
    container: any;

    constructor(rootNode: ElementRef) {
      this.rootNode = rootNode; 
    }

    ngOnInit() {
      this.container = $(this.rootNode.nativeElement).find('.departments-connections-graph')[0];
      console.log({ container : this.container});
      ...
    }
}

En teplate tengo por ejemplo:

<div class="departments-connections-graph">something...</div>

EDITAR

Alternativamente, en lugar de usar:

let $ = require('../../../../../node_modules/jquery/dist/jquery.min.js');

utilizar

declare var $: any;

y en su index.html ponga:

<script src="assets/js/jquery-2.1.1.js"></script>

Esto inicializará jquery solo una vez globalmente; esto es importante, por ejemplo, para usar ventanas modales en bootstrap ...

paso 1: usa el comando: npm install jquery --save

Paso 2: simplemente puedes importar angular como:

importar $ desde 'jquery';

eso es todo .

Un ejemplo sería:

import { Component } from '@angular/core';
import  $ from 'jquery';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'app';
  constructor(){
    console.log($('body'));
  }


}

// instalando jquerynpm install jquery --save

// instalación de la definición de tipo para jquerytypings install dt~jquery --global --save

// agregando la biblioteca jquery al archivo de configuración de compilación como se especifica (en el archivo "angular-cli-build.js")

vendorNpmFiles: [
  .........
  .........
  'jquery/dist/jquery.min.js'
]

// ejecuta la compilación para agregar la biblioteca jquery en la compilación ng build

// agregando la configuración de ruta relativa (en system-config.js) /** Map relative paths to URLs. */ const map: any = { ....., ......., 'jquery': 'vendor/jquery/dist' };

/** User packages configuration. */
const packages: any = {
......,
'jquery':{ main: 'jquery.min',
format: 'global',
defaultExtension: 'js'}};

// importa la biblioteca jquery en tu archivo componente

import 'jquery';

a continuación se muestra el fragmento de código de mi componente de muestra

import { Component } from '@angular/core';
import 'jquery';
@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',  
  styleUrls: ['app.component.css']
})
export class AppComponent {
  list:Array<number> = [90,98,56,90];
  title = 'app works!';
  isNumber:boolean = jQuery.isNumeric(89)  
  constructor(){}
}

Si usa angular-cli puede hacer:

1. Instalar la dependencia :

   npm install jquery --save

   npm install @ types / jquery --save-dev

2. Importa el archivo :

   Agregue "../node_modules/jquery/dist/jquery.min.js" a la sección "script" en el archivo .angular-cli.json

3. Declarar jquery :

   Agregue "$" a la sección "tipos" de tsconfig.app.json

Puedes encontrar más detalles sobre el documento oficial de angular cli

Para usar Jquery en Angular2 (4)

Sigue estos ajustes

instale la definición de tipo Jquery y Juqry

Para la instalación de Jquery npm install jquery --save

Para la instalación de definición de tipo Jquery npm install @types/jquery --save-dev

y luego simplemente importa el jquery

import { Component } from '@angular/core';
import * as $ from 'jquery';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent { 
  console.log($(window)); // jquery is accessible 
}

Usando Cli Angular

 npm install jquery --save

En angular.json debajo de la matriz de scripts

"scripts": [ "node_modules/jquery/dist/jquery.min.js" ] // copy relative path of node_modules>jquery>dist>jquery.min.js to avoid path error

Ahora para usar jQuery, todo lo que tiene que hacer es importarlo de la siguiente manera en cualquier componente que desee usar jQuery.

Por ejemplo, importar y usar jQuery en el componente raíz

import { Component, OnInit  } from '@angular/core';
import * as $ from 'jquery'; // I faced issue in using jquery's popover
Or
declare var $: any; // declaring jquery in this way solved the problem

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {


ngOnInit() {
}

jQueryExampleModal() { // to show a modal with dummyId
   $('#dummyId').modal('show');
}

Como soy un tonto, pensé que sería bueno tener un código funcional.

Además, la versión de tipificación Angular2 del transportador angular tiene problemas con jQuery $ , por lo que la respuesta más aceptada no me da una compilación limpia.

Estos son los pasos que llegué a estar trabajando:

index.html

<head>
...
    <script   src="https://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>
...
</head>

Dentro de my.component.ts

import {
    Component,
    EventEmitter,
    Input,
    OnInit,
    Output,
    NgZone,
    AfterContentChecked,
    ElementRef,
    ViewChild
} from "@angular/core";
import {Router} from "@angular/router";

declare var jQuery:any;

@Component({
    moduleId: module.id,
    selector: 'mycomponent',
    templateUrl: 'my.component.html',
    styleUrls: ['../../scss/my.component.css'],
})
export class MyComponent implements OnInit, AfterContentChecked{
...
    scrollLeft() {

        jQuery('#myElement').animate({scrollLeft: 100}, 500);

    }
}

Solo escribe

declare var $:any;

después de todas las secciones de importación, puede usar jQuery e incluir la biblioteca jQuery en su página index.html

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

funciono para mi

1) Para acceder a DOM en el componente.

import {BrowserDomAdapter } from '@angular/platform-browser/src/browser/browser_adapter';
constructor(el: ElementRef,public zone:NgZone) {
     this.el = el.nativeElement;
     this.dom = new BrowserDomAdapter();
 }
 ngOnInit() {
   this.dom.setValue(this.el,"Adding some content from ngOnInit"); 
 }

Puede incluir jQuery de la siguiente manera. 2) Incluya su archivo jquery en index.html antes de las cargas angulares2

      <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- jquery file -->
    <script src="js/jquery-2.0.3.min.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>

Puede usar Jquery de la siguiente manera, aquí estoy usando el selector de fecha JQuery Ui.

    import { Directive, ElementRef} from '@angular/core';
    declare  var $:any;
    @Directive({
      selector: '[uiDatePicker]',
     })
    export class UiDatePickerDirective {
      private el: HTMLElement;
      constructor(el: ElementRef) {
        this.el = el.nativeElement;

     }

    ngOnInit() {
        $(this.el).datepicker({
         onSelect: function(dateText:string) {
            //do something on select
         }
        });
    }
}

Este trabajo para mi.

Estoy omitiendo la instalación de jquery ya que este punto se ha mencionado en todas las publicaciones creadas antes de la mía. Entonces, ya has instalado jquery. Importando t en su componente de esta manera

import * as $ from 'jquery';

funcionará, pero hay otra forma "angular" de hacerlo creando un servicio.

Paso no. 1: crea el archivo jquery.service.ts .

// in Angular v2 it is OpaqueToken (I am on Angular v5)
import { InjectionToken } from '@angular/core';
export const JQUERY_TOKEN = new InjectionToken('jQuery');

Paso. No. 2: registre el servicio en app.module.ts

import { JQUERY_TOKEN } from './services/jQuery.service';
declare const jQuery: Object;

providers: [
    { provide: JQUERY_TOKEN, useValue: jQuery },
]

Paso no. 3: inyecta el servicio en tu componente my-super-duper.component.ts

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

export class MySuperDuperComponent {
    constructor(@Inject(JQUERY_TOKEN) private $: any) {}

    someEventHandler() {
        this.$('#my-element').css('display', 'none');
    }
}

Estaré muy agradecido si alguien puede explicar los pros y los contras de ambos métodos: DI jquery como servicio versus import * as $ de 'jquery';

La forma más efectiva que he encontrado es usar setTimeout con un tiempo de 0 dentro del constructor de página / componente. Esto permite que jQuery se ejecute en el siguiente ciclo de ejecución después de que Angular haya terminado de cargar todos los componentes secundarios. Se podrían usar algunos otros métodos de componentes, pero todos los que he intentado funcionan mejor cuando se ejecutan dentro de un setTimeout.

export class HomePage {
    constructor() {
        setTimeout(() => {
            // run jQuery stuff here
        }, 0);
    }
}

Esto es lo que funcionó para mí: Angular 2 con webpack

Intenté declarar $como tipo, anypero cada vez que intenté usar cualquier módulo JQuery que estaba obteniendo (por ejemplo) $(..).datepicker()no es una función

Como tengo Jquery incluido en mi archivo vendor.ts, simplemente lo importé a mi componente usando

import * as $ from 'jquery';

Ahora puedo usar los complementos de Jquery (como bootstrap-datetimepicker)

También puede intentar importarlo con el "InjectionToken". Como se describe aquí: use jQuery en angular / mecanografiado sin una definición de tipo

Simplemente puede inyectar la instancia global de jQuery y usarla. Para esto no necesitará ninguna definición de tipo o tipificación.

import { InjectionToken } from '@angular/core';

export const JQ_TOKEN = new InjectionToken('jQuery');

export function jQueryFactory() {
    return window['jQuery'];
}

export const JQUERY_PROVIDER = [
    { provide: JQ_TOKEN, useFactory: jQueryFactory },
];

Cuando se configura correctamente en su app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { JQ_TOKEN } from './jQuery.service';

declare let jQuery: Object;

@NgModule({
    imports: [
        BrowserModule
    ],
    declarations: [
        AppComponent
    ],
    providers: [
        { provide: JQ_TOKEN, useValue: jQuery }
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Puede comenzar a usarlo en sus componentes:

import { Component, Inject } from '@angular/core';
import { JQ_TOKEN } from './jQuery.service';

@Component({
    selector: "selector",
    templateUrl: 'somefile.html'
})
export class SomeComponent {
    constructor( @Inject(JQ_TOKEN) private $: any) { }

    somefunction() {
        this.$('...').doSomething();
    }
}

Instalación de la Biblioteca Global como documentación oficial aquí

1. Instalar desde npm:

   npm install jquery --save

2. Agregue los archivos de script necesarios a los scripts:

   "scripts": [ "node_modules/jquery/dist/jquery.slim.js" ],

Reinicie el servidor si lo está ejecutando, y debería estar funcionando en su aplicación.

Si desea usar dentro de un solo componente, use import $ from 'jquery';dentro de su componente

Otros ya publicaron. pero doy un ejemplo simple aquí para que pueda ayudar a algunos recién llegados.

Paso 1: en su referencia index.html jquery cdn

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

Paso 2: suponga que queremos mostrar div u ocultar div al hacer clic en un botón:

 <input type="button" value="Add New" (click)="ShowForm();">


 <div class="container">
  //-----.HideMe{display:none;} is a css class----//

  <div id="PriceForm" class="HideMe">
     <app-pricedetails></app-pricedetails>
  </div>
  <app-pricemng></app-pricemng>
 </div>

Paso-3: en el archivo de componentes a continuación, la importación declara $ como se muestra a continuación:

declare var $: any;

que crear una función como abajo:

 ShowForm(){
   $('#PriceForm').removeClass('HideMe');
 }

Funcionará con los últimos Angular y JQuery

Primero, instale jQuery usando npm de la siguiente manera:

npm install jquery — save

En segundo lugar, vaya al archivo ./angular-cli.json en la raíz de la carpeta de su proyecto CLI Angular, y encuentre los scripts: propiedad [] e incluya la ruta a jQuery de la siguiente manera:

"scripts": [ "../node_modules/jquery/dist/jquery.min.js" ]

Ahora, para usar jQuery, todo lo que tiene que hacer es importarlo en cualquier componente que desee usar jQuery.

import * as $ from 'jquery';
(or)
declare var $: any;

Eche un vistazo al siguiente código que usa jQuery para animar div al hacer clic, especialmente en la segunda línea. Estamos importando todo como $ desde jQuery.

import { Component, OnInit  } from '@angular/core';
import * as $ from 'jquery';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Look jQuery Animation working in action!';

  public ngOnInit()
  {
    $(document).ready(function(){
        $("button").click(function(){
            var div = $("div");  
            div.animate({left: '100px'}, "slow");
            div.animate({fontSize: '5em'}, "slow");
        });
    });
  }
}

Instalar jquery

Terminal $ npm install jquery

(Para bootstrap 4 ...)

Terminal $ npm install popper.js

Terminal $ npm install bootstrap

Luego agregue la importdeclaración a app.module.ts.

import 'jquery'

(Para bootstrap 4 ...)

import 'popper.js'
import 'bootstrap'

Ahora ya no necesitará <SCRIPT>etiquetas para hacer referencia al JavaScript.

(Cualquier CSS que desee usar aún debe ser referenciado styles.css)

@import "~bootstrap/dist/css/bootstrap.min.css";

Cuando use Angular, intente no usar la biblioteca jquery. Intente usar las características y las bibliotecas que se producen para el marco angular. Si desea utilizar las funciones jquery como find () , html () , arest () y etc., sugiero usar js puro. ejemplo: querySelector () , innerHTML , parentElement y etc.