3

¿Cuál es la forma correcta de utilizar jQuery en Angular 2? Por ejemplo para inicializar elementos de materialize o bootstrap como pushpin

$(document).ready(function(){
   $('.tabs-wrapper .row').pushpin({ top: $('.tabs-wrapper').offset().top });
});
1
  • Sería para usarlo junto a TypeScript ;) Siempre ando con "ñapas" y no sé si hay una forma correcta de hacerlo...
    – Mik Pride
    Commented el 14 dic. 2016 a las 7:17

4 respuestas 4

3

Usar jQuery de Angular2 es una brisa en comparación con ng1. Si está utilizando TypeScript, puede hacer referencia a la definición de tipos de letra 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);

Para instalar jQuery en su aplicación de Angular 2 haga esto.

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

Si quieres usar JQuery desde Typescript (con Angular 2 o con cualquier otra cosa), lo mas fácil es instalar typings usando npm

npm install typings --global

o bien

npm install typings --save

y luego instalar las definiciones Typescript para jquery.

typings install dt~jquery --save

El prefijo dt~ viene de DefinitelyTyped, un repositorio centralizado de definiciones typescript para las librerías más comunes.

Finalmente añades jquery a tu pagina principal y listo.

<script src="jquery.js"></script>
0
1

La mejor forma de usar Jquery en angular 2 es installandolo en el proyecto y asegurarse que en package.json, quede configurado. Para utlizar junto a bootstrap en el cual es requerimiento para usarlo, se debe configurar el angular-cli.json

installa jquery (con --save se configura el package.json automaticamente)

npm install jquery --save

configura el angular-cli.json

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

asegurarse que el jquery esta bien configurado en las dependencias en package.json

"dependencies":{...
    "jquery": "^3.2.1", ...}

si se utiliza junto con bootstrap, para que los estilos de funcionen correctamente, se debe configurar el "styles" en angular-cli.json y ponerlo despues del jquery en "scripts"

1

puedes usarla de la siguiente manera, primero necesita instalar jquery

 npm install jquery

en tu archivo de componente

import * as $ from 'jquery';

despues lo usas como siempre, es lo mas practico a mi parecer.

Saludos

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.