Usar JQuery con Angular2

Hola buenas a todos, hoy vamos a ver como poder usar JQuery en Angular2.

Siempre, cuando hacemos aplicaciones web, vamos a necesitar del queridisimo JQuery, nos va a facilitar muchas cosas que por ahí, TypeScript no nos ayuda.

Una forma de agregar esta libreria a nuestro proyecto es la siguiente:

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

Declaramos $ como variable de tipo any

import { Component, Input, OnInit, AfterViewChecked } from '@angular/core';
...
declare var $: any;

y ahora podemos usar JQuery como lo hacemos normalmente:

$('#panel-chat').animate({ scrollTop: $('#panel-chat').prop('scrollHeight') }, 1000);

Como vemos es una forma de integrar estas dos tecnologias.

Otra forma de hacerlo es mediante npm.
1. Instalamos jquery con npm

npm install --save jquery

2. Instalamos el archivo de declaración jQuery para angular

install -D @types/jquery

3. Importamos jQuery

import * as $ from 'jquery';

Y de la misma forma podemos usar nuestro código Jquery sin problemas:

$('#panel-chat').animate({ scrollTop: $('#panel-chat').prop('scrollHeight') }, 1000);

Bueno espero les sea de utilidad, ami me sirvió mucho para algunos proyectos.

Si quieres dejar algun comentario y quieres compartir algo con todos, serán bienvenidos.

Un saludo cordial a todos.

LEAVE YOUR COMMENTS