Hoy aprenderemos a usar jQuery en Angular 2, en el ejemplo que voy a hacer veremos como usar jQuery dentro de un componente de Angular2.
jQuery es una librería de JavaScript que nos permite trabajar con el DOM de forma muy sencilla y Angular 2 es un framework desarrollado por Google que sirve para desarrollar aplicaciones web SPA, osea que el propósito de estos frameworks es completamente diferente.
Cuando trabajamos con Angular 2 lo recomendable es no usar jQuery o usarlo muy poco, aún así puede darse el caso que necesitemos usarlo.
Veamos como usar jQuery en Angular 2.
Lo primero es incluir la librería de jQuery en el head del index.html, puedes hacerlo con jQuery descargado localmente o usando un cdn como hago aquí.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
En la plantilla de mi componente tengo un h1 oculto que cuando le de click a un botón pretendo que se muestre con una pequeña animación de Slide con jQuery.
<h1 class="title" style="display:none;">
{{title}}
</h1>
<button (click)="mostrarTitulo()">Mostrar titulo</button>
Mi componente quedaría así, la única peculiaridad es que para poder usar las funciones de jQuery tengo que declarar unas variables globales e indicarle a typescript el tipado que tienen.
import { Component } from '@angular/core';
// Declaramos las variables para jQuery
declare var jQuery:any;
declare var $:any;
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent{
title = 'Curso de Angular 2 - victorroblesweb.es';
public mostrarTitulo(){
console.log("click");
// Usamos jQuery con normalidad
$(".title").slideToggle();
}
}
Pues con esto ya sabemos usar jQuery en Angular 2 y usarlo dentro de un componente.
